Web Design Workshop 11 Background

Web Design Workshop 11 Background

Now that we have formatted about all the content of our page, let’s add a background. The Style-sheet allows for adding a background color and or an image.

The Background

For the purpose of this workshop I have opted for a background picture. The background should not be dominant nor distract the visitor and yet be interesting and dynamic. I will either choose a background with texture or an interesting image.

The choice needs also to be made in function of the colors used by the web design. On the demo site you see Black, White, Gray and Red; a gray scaled picture could be a good choice.

Big pictures often take long to load, namely when tiling them all over the background (x and y).

My picture is a Nasa picture 1800 x 1600 pixels big. I will not tile it vertically and therefore I just fade it out to gray c0c0c0 at the bottom.

The Image

The Background Image Fading

The Background Style

By default the background is coded as follows on the style-zero style-sheet as from line 31:

body {
background: #FFFFFF /* url(images/xy.gif) repeat*/;
margin: 0 auto;
font-size: 14px;
padding: 0;
}

We modify the background line to read as follows:

background: #c0c0c0 url(images/corona3.jpg) repeat-x;

The basic background color is c0c0c0, color to which we have faded the bottom of the image (you can do this with SPX editor, GIMP, Photoshop or any tool which allows fading). The we have loaded the image into our theme image folder at wp-content/themes/xo/images and added the path to the style-sheet.
Here is our result on a resolution of 1680 px:

The same on a resolution of 1280px:

Not bad … I leave it that way.

Here is how the image fades into the background color:

Have a look at the demo site HERE.

Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.

This page is wiki editable click here to edit this page.

More about this Topic

• Web Design Backgrounds
• Web Design Workshop 15 Disney Look
• What is CSS
• Web Design Workshop 12 Blockquotes and Pullquotes
• Web Design Workshop 8 Footer