Web Design Workshop 11 Background

13 Sep Web Design Workshop 11 Background

by Yorgo Nestoridis

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

Fading at the Bottom to c0c0c0

Fading at the Bottom to c0c0c0

The Background Style

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

< blockquote >

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:

Background on 1680 px Resolution

Background on 1680 px Resolution

The same on a resolution of 1280px:

Background on 1280 px Resolution

Background on 1280 px Resolution

Not bad … I leave it that way.

Here is how the image fades into the background color:

Fading Background Image

Fading Background Image

Have a look at the demo site HERE.

More about this Topic

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.

No Comments

Post A Comment