How to Make CSS Background Images: Guide to Stationary Backgrounds, Graduated Colors, and Scrolling

Using CSS for Backgrounds

The advent of CSS – Cascading Style Sheets – has revolutionised the design of web pages, and here we take a look at the use of CSS in controlling and creating background images.

Many people forget the importance of background on a website, but it is a fact that it can be a dominant factor, present as it always is. CSS enables us to make sure the background color and image is as easy on the eye as it can be, while offering other options too.

Choosing Your Color

There are different ways of defining background color; each color has a code name (white, for instance, is h4) or a hexadecimal numerical representation, or is created by ‘mixing’ the values of the constituent colours red, green and blue ion given amounts.

Thus, if one wants a white background, a simple command using the ‘h4’ name will ensure that it is so, whereas if you need a mix you simply include in the command the amount or red, green and blue – in that order – in a range between 0-255.

For instance, the command

{ background-colour: rgb( 101, 117, 208); }

While this may sound complex, it is simple once you get the hang of it, and there are tables of colors, and color names for CSS, available on the web.

Repeating the Image

You can also choose the manner in which your image ‘repeats’ across the page – for instance the command

p { background-image: url(xyz.jpg); }instructs the use of a local image ‘xyz.jpg’ as your background.

You can use any image as the background, or create your own and refer to that in the same manner. If the image you require is not a local one, the use of the complete url is the only necessary alteration to the above command.

There are methods of ensuring your background repeats either horizontally or vertically, too, using the suffix ‘-y’ or ‘-x’ – indicative of the x and y axis – in the command.

Scrolling or Still Images?

Also utilised by many designers is the ability to have the background image stay stationary on the screen, as opposed to scrolling in the normal manner.

Have a look at this command:

textarea.noScroll { background-image: url(xyz.jpg); background-attachment: fixed;}

This instructs the background – the image xyz.jpg – remain stationary and not scroll with the user.Replace the final word – ‘fixed’ – with the command ‘scroll’ and the background will scroll, as is normally the case.

In addition to the color and behaviour of the background image, it can be instructed as to where it is to be placed, whether it is to be solid or graduated, and how it appears to the user initially as well as many more very useful and attractive features.

Making the Code Work

Open a document and name it something like style.css

Enter the codes that will acheive the effects you want, like this:

#header {

background-image: url(xyz.jpg);

background-attachment: fixed;

}

Attach the stylesheet to your HTML document, with this code: link href=“style.css” rel=“stylesheet” type=“text/css” in the head of your HTML document. Alternatively, you can use inline stylesheets in your HTML as you work, with the style (in brackets) code, or you can import the style sheet using this code:

To see the effect, insert a DIV tag in your HTML body. Enter the id=“header” You should see whatever background you used in that area of the page.