07/07/2011

CSS Backgrounds

by Cyle
Categories: css
Tags: ,
Comments: Leave a Comment

CSS can be used to change the background of any element, whether it be an entire page or just a table. A background can be a color or an image. Below are some examples.

In order to apply a background to the entire page we apply the background to the body element like below, but I will be applying it to a standard div box for demonstration.

body {background-color:#66ccff;}

Background Color

Let’s start with just a basic color as a background, using the same example above, but only apply it to this div box.

div {background-color:#66ccff;}

Colors can be either a HEX value (#66ccff), an RGB value (rgb(0,100,200)), a color name (“blue”), or transparent (default).

Background Image – Repeat

The background-image specifies an image to be the background. By default the image will repeat both horizontally and vertically to fill the entire element.

div {background-image:url('textured-cloud.jpg');}

As you can see, we took our small image and applied it to the div box above, and it was repeated to fill the entire box. The image used was repeated both horizontally and vertically. You can see the original image to the right. Make sure to use a good background image that does not make it hard to read your text.

One huge advantage of repeating your background image is that it can be a very small image and just repeated across the page. It is a lot quicker to load one small image and repeat it than to load a huge background image that is not repeating. For example, I can take the image to the left and repeat it horizontally across instead of using one very wide image.

div 
  {
  background-image:url('header-bg.jpg');
  background-repeat:repeat-x;
  }

Look familiar? It should. That is how this website’s header is set up. You can also repeat in the y-direction the same way by using background-repeat:repeat-y.

Background Image – No Repeat

Sometimes when it is difficult to read the text in front of the background we move the background off to the side. We do this by using the background-position property. Make sure to turn the repeating to no-repeat so the image is only shown once where you put it.

div
  {
  background-image:url('treefrog.gif');
  background-repeat:no-repeat;
  background-position:right top;
  }

The position can be set many different ways:

Value Description
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Any of these will work. If you do not specify left, right, or center then center will be used.
%x %y These are how far from the top left (0% 0%) you want the background image to be. The bottom right is 100% 100%. The first value is how far to go horizontally across the page, and the second is vertically. If only one value is specified then the other will be 50%. If no value is specified then it will use defaul values, which is 0% 0%. It would look like this: background-position:100% 25%
xpos ypos These are similar to the percentages above, but use CSS units. These can be mixed with the percentages. (Example:background-position:100% 50px)

Background Image – Attachment

The background-attachment property determines if the background image is fixed or if it scrolls with the rest of the page.

Fixed Scroll
div
  {
  background-image:url('paper.gif');
  background-attachment:fixed;
  }
div
  {
  background-image:url('paper.gif');
  background-attachment:scroll;
  }
To see the difference scroll up and down the page while looking at these backgrounds.
To see the difference scroll up and down the page while looking at these backgrounds.

The default value for the background-attachment property is scroll.

Background Shorthand

There are many properties associated with backgrounds. It is possible to shorten all the background properties and specify them in one single property. That property is the background property.

div
  {
  background: #c1ef9b url('treefrog.gif'); no-repeat; right top;
  }

 


Leave a Reply

Your email address will not be published. Required fields are marked *



user-avatar
Today is Wednesday
05/24/2017