CSS Basics Part 8: CSS Backgrounds

CSS
f t g+ in

In this tutorial, we will take a detailed look at CSS backgrounds (color, image, position, etc.) and give some examples.

This is the 8th part of the CSS Basics series in which I will talk about styling backgrounds.

Using CSS backgrounds in your design is a highly effective way to style your website minimizing the use of images. CSS offers a great flexibility in terms of backgrounds and I want to start with color.

Background Color

If used properly, colors could be more than enough in your layout design eliminating the need for images for most parts. Using background colors instead of images also decreases the overall size of your site and increases the loading speed considerably. That's why I prefer and recommend using colors instead of images in web design wherever it is possible.

The following code sets the background color of the whole body of your web page to blue and background color of the paragraphs to white.

body { background-color: blue } p { background-color: white }

You can change the background color of any element you want. Just like the text color we discussed on a previous post, background-color can be applied by the color name, its hexadecimal number or RGB code. By default, background color is transparent, meaning that, whatever you insert into the body of the page, they will be in front of the background.

Background Image

If you want to add a background image to your web page or to a specific element like a button etc., you need to use background-image. Here is how it is used:

body { background-image: url('/image.gif') }

Change image.gif with the path to your background image. The background image is placed at the top-left corner of the element, and it will be repeated both horizontally and vertically by default.

Background Position

You can place the background image of an element to the exact position you want with the background-position property. The example below will set the image to top left of the body.

body { background-position: left top }

Other values it can get are: left center, left bottom, right top, right center, right bottom, center top, center center and center bottom. You can also define the position by using x and y positions as a number or percentage.

Background Attachment

To attach background image, i.e. to fix its position, background-attachment property is used.

body { background-attachment: fixed }

The background image is fixed.

body { background-attachment: scroll }

The background image scrolls with the page when you scroll down.

Background Repeat

Specifies how a background image will be repeated. Takes four values; repeat, repeat-x, repeat-y, no-repeat.

body {
background-image: url('image.jpg');
background-repeat: no-repeat;
}

Finally, like the font property, you can use background property to set all the properties in one declaration.

body { background: black url('/image.jpg') no-repeat fixed left top }

Again, you should do that in the correct order: background-color, background-image, background-repeat, background-attachment, and background-position.

I guess that will be enough talk about CSS background properties at this time, I will see you on the next part about CSS Borders.

Was this post helpful?

If you found this post to be helpful, please share it! Thank you :)

f t g+ in