Background Colors and Gradients

We’ve discussed adding background images to our web pages – as a background for the entire page and as a background for boxes within our web pages. In this post, let’s look at adding background colors (which we’ve covered a bit already) and using gradients as our backgrounds.

Background Colors

As we’ve noticed in previous posts, background color is a CSS property we can add to our entire page, or to boxes (containers) within our page. I often use solid background colors when first designing a page layout – just so I can see where the different areas will be and that they are positioning where I want them to be – all before adding content to a page.

To add a background color that fills the entire browser window, we would add the background-color property to the body tag through CSS:

body {
   background-color: #009;
}

The navy blue color defined above will fill the browser window.

We can do the same for any boxes we define through CSS.

#wrapper {
	background-color: #FFF;
        width: 960px;
        margin: 0 auto;
}

Now, we have an area for the content of the page that is white, with a background color of the navy blue.

We can continue to use the background-color property throughout our boxes of content.

Background Gradients

To add more interest and depth to our pages, I often like to use gradients, or multiple colors in the background.

If you glance at the image at the top of this post, the background colors and gradients is actually an image, repeated across the page horizontally.

After creating the design in Photoshop, I take a sliver of the background area and save it out as a jpg.

The CSS code for the body tag would include the following properties:

 body {
   background-image: url(images/bckground.jpg)
   background-repeat: repeat-x;
}

Suddenly our page has a lot more interest that just a solid background color:

 

Be creative in the use of background images.

You can repeat an image down the page or vertically within a box.  (background: repeat-y)

You can use an image within an area and have it show up only once, having it fill only a portion of the area. (background: no-repeat)

The possibilities are many. Have fun creating!