Previous Page
Next Page

Adding Background Images

If you're familiar with writing HTML by hand, you've probably added a background image to a page. You could continue adding background images in HTML, but you have more control if you do it via CSS. In this example, we've added a picture of the Bard himself to our page by adding a few properties to the body rule, as shown in Script 11.8. The image appears on our page, as in Figure 11.8.

Script 11.8. We've gone back to the body rule to insert the background image, specifying its source and attributes.

body {
     background-color: white;
     color: black;
     font-family: "Trebuchet MS", verdana, helvetica, arial, sans-serif;
     font-size: 0.9em;
     background-image: url(images/shakespeare.gif);
     background-repeat: no-repeat;
     background-position: right 50px;
}
img {
     margin-right: 10px;
}
.character {
     font-weight: bold;
     text-transform: uppercase;
}
div.character {
     margin: 1.5em 0em 1em 17em;
}
.directions {
     font-style: italic;
}
.dialog, .directions {
     margin-left: 22em;
}
.directions .character {
     font-size: 1.4em;
}
#week2 {
     background-color: #FFFF00;
}
a {
     text-decoration: none;
     padding: 5px 10px 5px 10px;
}
a:link {
     color: #0000FF;
}
a:visited {
     color: #000000;
}
a:hover {
     color: #FFFFFF;
     background-color: #000000;
     text-decoration: underline;
}
a:active {
     color: #FF0000;
}

Figure 11.8. We added Shakespeare to watch over the page with just a quick addition to the body rule.

[View full size image]


To add a background image:

  • background-image: url(images/shakespeare.gif);
background-repeat: no-repeat;
background-position: right 50px;

    The first line adds the background image and specifies the path to the image. The next line tells the browser to not repeat the image down the page (or in other words, to place it on the page only once). Finally, the image is positioned flush right and 50 pixels from the top of the page.


Previous Page
Next Page