Pin Me

Managing Backgrounds Using CSS

written by: pauldb28•edited by: Michele McDonough•updated: 2/14/2010

Ever wonder how larger websites manage backgrounds? There's really only a couple good ways and using CSS is one of the easiest.

  • slide 1 of 1

    Managing Backgrounds Using CSS

    Would you like to be able to control the background in all of your web pages on a singe web site with one file instead of having to change each page individually? CSS can give you the opportunity to make your web site background consistent without the heart ache of changing each page every time you want to change the background. Cascading Style Sheets or CSS allows the web site designer to make their entire web site consistent by allowing each page to pull from a separate file that contains specific instructions on how that page should be formatted. This article will discuss how to create and use this file and control a web site background and assumes that the reader has a basic understanding of HTML code.

    To use CSS and take advantage of formatting all of the pages on a web site you must have two files. In some cases you can use CSS without using two files but it will only format the particular page the code has been installed on.

    Here are the basic steps to creating a site that has taken advantage of CSS

    Create a web page or web site

    Create a .css file

    Install a small line of HTML code on all web pages you want the CSS file to control

    Creating a .css file is really easy:

    Open up notepad

    click save as

    in the “File Name ” text box type in a name for the file and add “.css” to the end of it

    on the “Save as type” box Select “All Files”

    Click “Save”

    This will save a blank CSS file.

    Now open the .css file you just saved. To control just the color of the background put the following code in the file and click save. Xxx is the color, you can type red, blue, green etc or enter the hex color value.

    body,

    { background-color: xxx; }

    You can also use a background image if you would like by using the following code instead. You can replace xxx.xxx with the image name.

    body,

    { background-image: url("xxx.xxx") }

    After you have created both the web page and the CSS page you will need to link them together. This is done by adding a little piece of code into the head of all the pages you want the CSS file to control. Here’s the code, be sure to replace xxx with the file name you have named it as:

    <link rel="stylesheet" type="text/css" href="xxx.css">