HTML and CSS Reference
In-Depth Information
exerCise: adding BaCkgrounds to a page
in this exercise, you'll add background images and colors to a page using properties described in this
chapter. The main purpose is to highlight common problems caused by the interaction of vertical margins
and backgrounds. use destinations_begin.html and styles/destinations_begin.css in the ch08 folder as
your starting point. The web page contains an internet Explorer conditional comment to fix problems with
iE 6's lack of support for max-width and rounding of percentage widths (see Chapter 7 for a more detailed
explanation). The finished files are called destinations.html and destinations.css.
1.
in the
body style rule, change the background color to light blue and add the light
blue seamless tile, bg_tile.jpg, as a background image like this:
body {
margin: 0;
padding: 0;
font-family: "Lucida Sans Unicode", "Lucida Grande",
sans-serif;
color: #000;
background-color: #D2E1E6;
background-image: url(../images/bg_tile.jpg);
}
2.
To make it easier to add a background image to the main heading, wrap it in a
<div> with the id header :
<div id="header">
<h1>Mediterranean Destinations</h1>
</div>
Create a style rule for the
3.
header <div> using an id selector. use yachts_banner.jpg
as the background image, which should not repeat. The image is 127px high, so you
need to specify a height to ensure the <div> is tall enough to display the full image.
The style rule looks like this:
#header {
background-image: url(../images/yachts banner.jpg);
background-repeat: no-repeat;
height: 127px;
}
save the style sheet, and load the web page into a browser. The seamless tile
4.
covers the whole background of the page, and the image of the yachts acts as the
background to the main heading. The background color isn't visible because it's
covered by the seamless tile, but it will act as a fallback if the tile can't be loaded.
The big problem is a large gap at the top of the page, even though the body style
rule sets the page's margins and padding to zero.
5.
use the browser's developer tools to inspect the heading. As Figure
8-24 shows, the
<h1> element has large top and bottom margins. Adjacent vertical margins collapse
to the size of the largest margin. As a result the <div> and its background are
pushed away from the top of the page.
 
Search WWH ::




Custom Search