CSS - Background

To format the background with the use of CSS we will use the following attributes:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

CSS - Solid background

CSSbody { background-color: #efefef; }
h1 { background-color:red, }
p { background-color:rgb(255,0,0); }
div { background-color: black; }

As you can see, the color of the element can be set using the hexadecimal system, the RGB system, or just by naming the color. Please note that only standard English words can be used. Check the color chart for a full list of compatible names and colors

CSS - Image background

When it comes to using images as a background, the default behavior of the browser is to repeat the image, both for the height and width, until all the element background is covered. This comes from old times when internet connections were slow and you would normally use a really small image to create some fancy background effect.

CSSbody { 
   background-image: url("my_css_bg_image.png"); 
}

If you want to repeat the image only horizontally or vertically you'll have to use the background-repeat property.

CSSbody {
   background-image:url(my_css_bg_image.png);
   background-repeat:repeat-x;
}

This simple CSS property helps us create a gradient background effect by using an image with one-pixel width and a variable height (depending on the desired height of the gradient effect. Ex: 300px). If you want to repeat the image the other way around you will have to use the "repeat-y" value.

An last but not least, if you do not want to repeat the image in any way, just dive into the attribute a no-repeat value.

CSSbody {
   background-image:url(my_css_bg_image.png);
   background-repeat:no-repeat;
}

Once you specified you want no-repeat for your background image, the browser default behavior is to top-left align the image. And this takes us to the next background property

CSS - Background position

As you can already suspect, the background-position property gives the developer the ability to move the background to a specific area.

CSSbody {
   background-image:url(my_css_bg_image.png);
   background-repeat:no-repeat;
    background-position: center; 
}

The background positioning is a complex property and it has really lots of options. You would normally use two values for the X and Y axis. If you only use one value, the other one will automatically be "center".

• left top
• left center
• left bottom
• right top
• right center
• right bottom
• center top
• center center
• center bottom
• x% y%

CSS - Background attachment

The CSS background-attachment property sets if a background image will scroll with the rest of the content, or it will be fixed compared to the rest of the document.

CSSbody {
   background-image:url(my_css_bg_image.png);
   background-repeat:no-repeat;
   background-attachment:fixed;
}

You can create a simple parallax scrolling effect using the fixed value tor the background attachment. This is a simple yet very awesome CSS 3D illusion effect).

[code] .parallax-bg { background-image: url("my_css_bg_image.png"); background-repeat: no-repeat; background-attachment: fixed; background-position: center top; background-size: cover; min-height: 500px; }

There are few other background properties that are used to style background images like background-size we used above.

CSS - Background size

Background size is one of the simplest CSS background properties. It admits all these next values

• auto - the background image is displayed in its original size
• cover - resize the background image to cover the entire container. If the image is smaller it will be stretched or cut. The aspect ratio will always be preserved
• contain - resize the background image to make sure the image is fully visible
• length unit - sets the width and height of the background image. You can use px, em, pt, percentages o whatever units you like

CSS - Background shorthand

CSSbody {
   background-color:#ffffff;
   background-image:url(my_css_bg_image.png);
   background-repeat:no-repeat;
   background-position:top right;
}

You can resume all that CSS background properties in one single line like this

CSSbody {
   background-color: #ffffff url(my_css_bg_image.png) no-repeat top right;
}

Whe you'll use the shorthand of the background property the order is as follows:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

It doesn't matter if you omit one or more values as long as you preserve the given order. Go on and practice a little bit before passing to the next tutorial.

---