Web Design Workshop 16 – Scroll over Background

How to let your Content Scroll over the Background

Scr5olling over a background image may save resources, namely if you use a large background picture. Also it gives you more control over the way your blog displays on different monitors and with different resolution settings.

On my design blog you see an example.

Background CSS

CSS lets any element have a background image and or color. Using the appropriate standard properties, you are in control of the background.

Our Web design Workshops 6 and 11 have already developed the topic.

CSS Background Properties

CSS goes beyond the background atributes of HTML.

The CSS Background Properties are:

• background-image
• background-attachment
• background-repeat
• background-position
• background
• background-color

Background Attachment

In order to control scrolling or not scrolling over the background we need to define the background attachment.

The background-attachment property can take two values: scroll or fixed. The default value is “scroll” meaning that the background scrolls with the content.

If we want to obtain a static background and scroll content dynamically over that background, then we use the value “fixed”.

CSS Fixed Background Example with Semiomantics XO

On the mentioned Design Blog, the body background style is defined as follows:

body {
background: #fff2d4 url(images/wall1680c.jpg) repeat-x;
background-attachment: fixed;
margin: 0 auto;
padding: 0;
font-size: 14px;
color: #000125;
}


We are interested in the following two lines:

background: #fff2d4 url(images/wall1680c.jpg) repeat-x ;
background-attachment: fixed;

As you see the background color is defined with a color and an image (the color may load faster). The image has a width of 1680 pixels. We tile the image horizontally for the case that visitors may use larger resolutions than 1680 pixels wide. Vertical tiling is not really required as we scroll over the background. (Of course some visitors with a mega screen may have a vertical resolution bigger than the 1250 pixels of the image, but the bottom of the image fades into white).

The second line defines the background attachment: here we use fixed.

Now our page content scrolls over the background.

Note: Make sure your background image is not too heavy! On the Design Blog I have reduced 4.5 MB to 130 KB which is still big but it opens fast enough with most visitor’s ADSL line.

Web Design Workshop by Ycademy

Join tonight’s Ycademy Web Design Workshop16 at 8 pm GMT (London) where we will step by step apply the above. We will resize an image for the purpose of the background and then edit the style sheet to implement the fixed background effect.

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.