HTML and CSS Reference
In-Depth Information
EXAMPLE
14.7
<html>
<head><title>Backgrounds</title>
<style type="text/css">
1
body {background-color:"pink" ;
2
background-image: url(greenballoon.gif);
3
repeat-x };
4 h1 {font-size: 42pt;text-indent: 25%;
color:red; margin-top: 14%;
font-family:fantasy;}
</style>
</head>
5
<body>
6 <h1>Happy Birthday!!</h1>
<h1>Happy Birthday!!</h1>
</body>
</html>
EXPLANATION
1
The rule for the
body
element is to give it a pink background color.
2
The background image will come from a file called
greenballoon.gif
, in the current
directory. The URL specifies the location of the image.
3
The image will repeat itself horizontally across the screen.
4
The rule for the
h1
element is a red 42-point fantasy font, indented 25% from the
left of the block, where the margin is 14% from the top.
5
The body of the document reflects the style that was set for it in line 1.
6
The
<h1>
tag reflects the rule set for it in line 4. The result shown in Figure 14.8.
Figure 14.8
Background color and a repeating image.
