You certainly know the HTML ”<body>” tag is the topmost container box that wraps your web page design elements and content. Of course we can all agree that the “<html>” tag is the topmost parent element of the HTML DOM. So let me reformulate my previous statement to satisfy the geek within you: the body is the closest parent to HTML elements in your web page content. You can use the body tag to change your web page background color from the default “white”.
To add a background color that covers the entire web browser’s viewport, set a background property to the HTML body tag:
body {
background-color: #333333 ;
}
That create dark grey background color (#333333).
Applying a background color to the body tag add more contrast between your web page content and the remainder of the screen particularly with fixed width CSS layouts. In general, using a CSS background color is the easiest way to “colorize” a given block of content without adding much to your web page download time.
You can also add a background image to your web page body using the CSS style.
body {
background-image: url(images/bgbody.gif) ;
}
The url parameter defines the relative path to the graphic used as a background image.
That file’s path can be absolute (i.e. http://livetrainingsession.com/images/bgbody.gif or /images/bgbody.gif) or relative to the location the CSS style as show above.
Feel free to copy and paste that absolute path nto your web browser’s address bar to see the actual background image.
In this instance the web page uses a very small graphic made of dark-grey patterns. You can see that tiling bleeding through the left and right edges of this web page if your display width is greater than 980 pixels.
You can simultaneously apply the background color and the background image to the body tag as well. You would write the CSS style as follow:
body {
background-color: #333333 ;
background-image: url(images/bgbody.gif) ;
}
or use a more compact, shorthand version:
body {
background: #333333 url(images/bgbody.gif) ;
}
or even more compact:
body {
background: #333 url(images/bgbody.gif) ;
}
In this example, the background color is written in its compact form (#333). An hexadecimal value made of three pairs of identical values (33) can be replaced by just three values (333), one for each pair. Hence “#999999″ could be replace by “#999″ and the color “#FFFFFF” can be written “#FFF”.
It’s always a good idea to use a background color in conjunction with a background image. The web browser covers the “viewport” with the background color while downloading the background graphic. It’s not only for aesthetic but to avoid the visitor having to stare an empty white screen while the web page is loading.
It’s worth mentioning the background image is always displayed on top of the background color whenever the two are applied to the same HTML element. And it does not matter in which order they are defined.
