CSS Background Techniques

Jun 29
CSS, HTML, tutorial, web

In this tutorial we will be taking a look at some different techniques for creating background images for a web page. It will start out basic with some creating a solid color background then move to more advanced stuff like combining transparent png files and using div tags to make layered backgrounds. We will also take a look at a couple neat CSS3 tricks.

So lets start things off with some simple basic CSS.

First here is our html that will be used on these first few examples:

<!DOCTYPE html>
<html>
<head>
<title>Backgrounds</title>
</head>

<body>
</body>
</html>

Lets first change the back ground color to a a solid color, and lets go with a dark green.

The code for that would be:

body {
background-color: #009900;
}

You can see a sample of what this will look like here.

Now lets take a look at making a background pattern.
For this I will take this pattern

With this bit of CSS we will make that small pattern repeat across the entire background

body {
background-image: url('http://www.pandasoup.com/resource/images/backgroundPattern1.png');
background-repeat: repeat;
}

Now you can see a sample of this here.

In that last example I used the background-repeat property with the value of repeat. Well what if you wanted that background image to only repeat vertically or horizontally or what if you did not want it to repeat at all you could simply swap out the value of background-repeat with one of the values in the example below.

/* to repeat vertically you would use the value of repeat-x */
body {
background-image: url('http://www.pandasoup.com/resource/images/backgroundPattern1.png');
background-repeat: repeat-x;
}

/* to repeat horizontally you would use the value of repeat-y */
body {
background-image: url('http://www.pandasoup.com/resource/images/backgroundPattern1.png');
background-repeat: repeat-x;
}

/* to have the background not repeat use the value of no-repeat */
body {
background-image: url('http://www.pandasoup.com/resource/images/backgroundPattern1.png');
background-repeat: no-repeat;
}

Here are some examples of each repeat-x, repeat-y and no-repeat

You may have noticed that the no-repeat value might be useful if you could control where the background image is positioned. Well with CSS you can control that, here is a example where I position the background image to the top right. I have also Include a background-color in combination with the background-image so that you can see how the two attributes can work together.

body {
background-color: #009900
background-image: url('http://www.pandasoup.com/resource/images/backgroundPattern1.png');
background-repeat: no-repeat;
background-position: right top;
}

Here you can see an example. If you want to get more information about the background-position property check out this w3schools link as this post is getting a little long I dont want to get into all the details of how to use the background-position property.

We have covered the basics of the CSS background attribute and until now we have been creating a new line item for each attribute but I will now introduce you to what is know as shorthand CSS for the background I will introduce you to what is know as shorthand CSS for the background attribute.

What shorthand means is that instead of writing out each background property individually like background-color, background-image and background-position you instead just write background and place all the values after it. The important thing to remember is that the order that the values are placed in the background property is very important. If they are not in the correct order then it could cause the background to display odd in some web browsers. In the bellow example I will show you the order that is needed to keep the values in.

body {
/* the order is background-color background-image background-repeat background-attachment background-position */
background: #009900 url('http://www.pandasoup.com/resource/images/backgroundPattern1.png') no-repeat scroll right top;
}

You may have noticed that there was an attribute in there that I have not yet mentioned. The background-attachment refers to if the background image will scroll with the rest of the page or not it has values of scroll or fixed. Scroll means that the background image will move it the page is long and fixed means that the image will always stay in its location, even if you scroll down the page.

Bonus

Here’s a little sneak peak at what can be done with CSS3, this is compatible with all modern browsers (IE9, Firefox, Safari). As IE9 is the only version of IE that supports this at this time not enough users are using IE9 so until more users start using IE9 I would hold off on this.

With CSS3 you can have multiple background images to do this you simply place a comma after each value of a background property. I will so you two examples of code the first normal CSS and the other the shorthand version.

/*  example in individual properties */
body {
	background-image: url('http://www.pandasoup.com/resource/images/backgroundImage1.png'), url('http://www.pandasoup.com/resource/images/backgroundPattern1.png');
	background-repeat: no-repeat, repeat;
	background-position: top left, top left;
}
/*  example in shorthand */
body {
	background: url('http://www.pandasoup.com/resource/images/backgroundImage1.png') no-repeat top left, url('http://www.pandasoup.com/resource/images/backgroundPattern1.png') repeat  top left;
}

Example of multiple backgrounds using CSS.

It should be noted that the stacking order of the background images goes from top to bottom. So the background that you want to be on top of all the others should be the first one that you enter in the set.

I hope that you have found this helpful, let me know if you have any questions.

CSS Background Techniques

Bonus

Nutrition Facts

Recent Post

Friends