|
How do I use a background image?
Author: Deron Eriksson
Description: This CSS tutorial describes how to work with background images.
Tutorial created using:
Windows XP
(Continued from page 1) The style-test.html file below demonstrates background-image, background-color (the gray color can be seen through the background-image, which is a transparent gif), background-position, background-repeat, and background-attachment. style-test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
body { background-color: aqua; margin: 0; }
div {
width: 200px;
height: 100px;
background-color: #DDD;
background-image: url("world.gif");
}
div.center { background-position: center; }
div.bottomright { background-position: bottom right; }
div.positionspecified { background-position: 2px 15px; }
div.repeat { background-repeat: repeat; }
div.repeatx { background-repeat: repeat-x; }
div.repeaty { background-repeat: repeat-y; }
div.norepeat { background-repeat: no-repeat; }
div.scroll { background-attachment: scroll; }
div.fixed { background-attachment: fixed; }
</style>
</head>
<body>
<table>
<tr>
<th>background-position</th>
<th>background-repeat</th>
<th>background-attachment</th>
</tr>
<tr>
<td><div>default (0% 0%)</div></td>
<td><div class="repeat">repeat</div></td>
<td><div class="scroll">scroll</div></td>
</tr>
<tr>
<td><div class="center">center</div></td>
<td><div class="repeatx">repeat-x</div></td>
<td><div class="fixed">fixed</div></td>
</tr>
<tr>
<td><div class="bottomright">bottom right</div></td>
<td><div class="repeaty">repeat-y</div></td>
</tr>
<tr>
<td><div class="positionspecified">2px 15px</div></td>
<td><div class="norepeat">no-repeat</div></td>
</tr>
</table>
</body>
</html>
The display of style-test.html in IE7 is shown here. The background-attachment "fixed" value effect can be seen by shrinking the browser window so that it scrolls and then scrolling the page. 
Related Tutorials: |