13 Sep Web Design Workshop 11 Background
[ hide ]
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).
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:< blockquote >
background: #FFFFFF /* url(images/xy.gif) repeat*/;
margin: 0 auto;
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.
More about this Topic
|Author: Yorgo Nestoridis, Media Marketing & Publishing , Founder of YORGOO Publishing , YORGOO Press and Semiomantics .|
This page is wiki editable click here to edit this page.