CSS Background Code

For anyone looking for information on creating web page backgrounds using CSS, you've come to the right place. All of the instructions here assume a basic knowledge of stylesheets and will just discuss individual lines of a stylesheet for creating and implimenting background colors and images.

There's a reason for the big blue box in the middle of the screen; we'll get to that in a bit.

Background Color Code

Let's start with the easiest background to create - a solid color for the body of a webpage.

The CSS code is:

body { background: #000000; }

That's all you need to create a black background for an entire webpage. Perhaps you would like to make an individual page element have a different background.

The CSS code is:

h2 { background: #ffffff; }

Isn't it easy to create colored backgrounds with HTML and CSS?

CSS Background Image

Using images as backgrounds offer the webpage author a number of options. Let's start at the beginning.

It is good practice to assign a background color when using an image as a background. If you are using a dark background and white lettering and the image fails to load, your text will be unreadable on the default white background. With that in mind, to use the image picture.jpg as our background image, the CSS code would be:

body { background: #330099 url(picture.jpg); }

No quotations around the file name are needed.

CSS Background Fixed

Now to the blue box in the middle of the screen.

You may have visited a website where the background image stays in one place and is not tiled or repeated down the page. This is referred to as a fixed background and when used properly can make your webpage a real standout. (Obviously, with our blue box, we are not focussing on design, but technique.)

Please Note: Fixed backgrounds are one of those things Internet Explorer seems to believe that their way is better. For Internet Explorer to do fixed backgrounds 'right', the background being fixed must be defined in the style definition for the body of the webpage. Otherwise, as it does on this page when viewed with IE, your fixed background appears in coordinates that are calculated using the entire webpage rather than the screen being viewed.

Here's the CSS code:

body { background: url(images/blue-field.jpg) fixed no-repeat 50% 90%;}

Where:

fixed tells the browser the background image is to remain stationary on the screen

no-repeat tells the browser to display the background image only once

50% tells the browser to display the background image halfway across the screen, this is known as the x coordinate

90% tells the browser to display the background image 10% from the bottom of the screen, this is known as the y coordinate

X and Y coordinates of 0% would put the background image in the top left corner of the screen; 100% would put the background image in the bottom right corner of the screen.

One of the biggest things to remember with a CSS fixed background is to make sure that all text that will appear directly on the image will remain readable as the site visitor scrolls down your page.

Tiling a Background - Using the Repeat Attribute

Most backgrounds used on webpages are tiled. If your background is a texture or just some white dots on a blue background, it will make your webpages load quicker to use the smallest possible image.

The original image...

Used as a background - don't forget you might have to change your font color to keep it readable.

Using that tiny image as a background is quite simple. The CSS code just needs a little more information:

body { background #330099; url(blue-dots.jpg) repeat; }

Where:

repeat tells the browser to repeat the image to fill the area on the screen where that element is displayed

Now that you know how to create backgrounds using CSS, study other websites you visit. Most textured and patterned backgrounds are created using CSS.

Be sure to check out Help For Web Beginners other HTML & CSS Tutorials.