Web page background ideas

Before finishing up this section on web page backgrounds, we’ll run through some examples
that show the CSS and the result, along with the background image used. The files
within the basic-boilerplates folder can be used as starting points for web pages and
CSS documents. The images used in each case are in the chapter 2 folder of the download
files, and these should be placed in the same folder as the HTML and CSS document,
unless you amend path values accordingly.
Rename the files as appropriate for each example, ensuring you import the relevant CSS
file via the HTML document’s @import line.
For the HTML document, add several paragraphs within the existing div element that has
an id value of wrapper, as in the following code block (which, for space reasons, shows
only a single truncated paragraph—add more than this!):
<div id="wrapper">
<p>...</p>
</div>
In CSS, there are also some common elements to add to the boilerplate. For the #wrapper
rule, add some padding to ensure the content within doesn’t hug the box’s edges, and a
background rule to color the box’s background white. Also, the width value defines the
width of the box’s content, while the margin settings center the box horizontally. (The
method will be discussed further in other chapters, but by setting 0 auto as the margin
values, vertical margins are removed and horizontal margins are set to auto, which center
the box horizontally in the browser window.)#wrapper {
padding: 18px;
background: #ffffff;
width: 500px;
margin: 0 auto;
}
Note that in the download files, in order to keep things modular there are two #wrapper
rules in the CSS, and that’s what’s assumed in the previous code block. However, if you
prefer, add the property/value pairs from the previous code block to the style sheet’s
existing #wrapper rule. The same is true for many of the rules, such as the body rules in the
following subsections.