CSS Styles and Background Images

Options, style sheets and Dreamweaver

There seems to be a lot of confusion over how a page's background can be (or should be) controlled. There are some options for placing attributes in the opening <BODY> tag which seem to be quick, easy and effective but which, sadly, work properly only in Internet Explorer.

Using Cascading Style Sheet (CSS) technology seems to be the answer - In Dreamweaver it's easy after you've done it once but that first time can be a trial!

As an example, here are two pages, one uses the quick and dirty option which works for IE (PageBG_IE.htm) and the other (PageBG_CSS) which works with most browsers.

The notes below cover how to achieve the results using Dreamweaver. (DWMX is the version used.)

This is the background image used

and this is what it looks like when tiled

How's it done?

Putting a background into a page is achieved by inserting an image's path into the <BODY> tag, like this:

<body background="images/background.png">

Producing a result like this example. Note that the image is tiled across and down the page and scrolls with the page - As though the image and the words are printed on a sheet of paper and the sheet is moved.

Let's look at the easy way to control scrolling next . . .

<BODY> tag attributes

Create an HTML page in the editor of your choice and call it PageBG_IE.htm - this should contain the bare-bones HTML code

At the default <BODY> tag, update the tag's attributes from

. . . </head>

<body>

</body>
</html>

. . . </head>

<body background="images/background.png" bgproperties="fixed">

</body>
</html>

Add some rows of text to the page, save the document and view it (In IE, of course!)

CSS attributes

This method is applicable to most browsers and meets the standards set for web pages in the HTML and CSS definitions. (It's the right way!) Open a new page in Dreamweaver and, using Page Properties add a background image: BackGround.png

This produces the basic scrolling, tiled background as in the first example, above: PageBG_Basic.htm (This first step is technically unnecessary, since the CSS step will specify a background image, but - in the real world - this is how you usually begin . . . )
Next, select Add a CSS style in the design pane
Type in the name .background, selecting Custom Style (The <BODY> will be in this class) and for this document only (The CSS code will be in this page, not a separate CSS style sheet file)
Once you click on OK you get the CSS style definition dialog. Here this is completed to show the image once, non-scrolling in the top, left-hand area of the page, as shown
Add some rows of text to the page, so the browser will allow scrolling when you view the page. Finally, apply the style definition to the page As shown on the right	Select the <BODY> tag and open the tag editor - Assign the class background to the body of the HTML page, as shown below
From the Page Properties, delete the original page background (Although the original background should be over-ridden by the new CSS-defined image - Better safe than sorry, however!) and view the result

Most of this is covered quite well in the Macromedia help files and in some detail in how-to books like Dreamweaver MX Bible, by Joseph W Lowery, ISBN 0-7645-4931-6; published by Wiley Publishing Inc (http://www.wiley.com)

Once you've started using CSS a whole new world of control is delivered to your fingertips!