How to Set an Included HTML Background to Transparent
Reducing the opacity of an image makes the image look transparent. If it is placed on top of another image, the image below can be seen through. If the transparent image is the background, the image looks lighter and more washed out. You can use cascading style sheets to make the background of an HTML document transparent. Internet Explorer recognizes a different property than the CSS standard, so both must be included in the style.
Other People Are Reading
Instructions
-
-
1
Open a blank plain text document in any text editor.
-
2
Type these lines to start the HTML document.
<html>
<head>
-
-
3
Type these lines to create the style for the transparent background and to close the <head> section.
<style type="text/css">
.transparency
{
background:URL(background_url);
width:100%;
height:100%;
/* for IE */
filter:alpha(opacity=30);
/* CSS3 standard */
opacity:0.3;
}
</style>
</head>
Replace "background_url" with the location of the background image. The location can be a Web address (i.e., http://example.com/some_image.jpg) or a path to the image on the server (i.e., /image/some_image.jpg).
Replace the number next to "filter:alpha(opacity=" with a number from 1 to 100. Replace the number next to "opacity:" with a number from 0.0 to 1.0. The lower number is more transparent for both values.
-
4
Type these lines to start the body of the Web page and set the background to transparent.
<body>
<div class="transparency">
-
5
Type the rest of the HTML document.
-
6
Type these lines to close the <div> that contains the transparent background and the HTML document.
</div>
</body>
</html>
-
7
Save the file.
-
8
Open the file in any Web browser to view the background.
-
1
