Let’s have a look at backgrounds. In the previous two tutorials, I’ve covered borders and opacity. In this tutorial, we’ll cover some of the basic CSS3 additions to the background properties. If you have no idea how to deal with backgrounds in CSS, read my tutorial on backgrounds pre-CSS3. CSS3 is gaining momentum in the Web development world and many properties are already supported by most browsers (Firefox, Konqueror, Safari, and Chrome) as well as some minor browser (Opera). If you want to stay on top of the game, you have to learn the new stuff and employ the new techniques you’re presented with.

In this tutorial, I’m going to cover:

• background sizes
• multiple backgrounds
• background origin/clip

I will provide illustrations as to what each property looks like and you can also view my CSS3 testing sample that features this tutorial’s properties (among others). The properties will be compatible with both webkit (Safari and Chrome) and the Mozilla engine. Internet Explorer, unfortunately, does not yet support most CSS3 properties. I’d like to also note that I use a Mozilla Firefox 3.5.2 (which apparently has tons of trouble using ANY of these properties) and Chrome 3.0.195.33 (which seems to render everything perfectly).

---

---

---

The background-size property is very straight forward. You simply choose the width and the height as the values. You can use percentages, pixels, and other measurements.

First, why do we use this? Well, let’s say you have an image that’s too big or too small and you want to resize it without using photoshop or another tool. There are few reasons why you’d want that. Let’s say you want the same image on one website to be 400×500 px while on another site, you want it to be 200×250 yet you don’t want to create the extra file.

In my example, I have a strangely sized logo that is 474 px by 185 px. Now, I want it to be about 90 px tall, so that’s be 231 width. Here’s what the code would look like:

background:url(background1.png) no-repeat center;
	-webkit-background-size: 231px 90px;
	-moz-background-size: 231px 90px;
	-o-background-size: 231px 90px;
	-khtml-background-size: 231px 90px;
background-size: 231px 90px;

This code should show up properly on the above-mentioned browsers. I’ve had no trouble with Chrome but my Firefox is being stubborn. The result should look something like this:

As opposed to this:

Note that I am creating these images as I go so whenever I add more backgrounds and use other CSS3 properties, my testing site will look differently.

---

Ever wished you could stack multiple backgrounds without having to create multiple divs? Well, that’s what this new background extension property does. You can stack multiple backgrounds and using the rgba () value, you can even change opacity of color-based backgrounds.

Here’s the concept. Okay, so on my example page, I want the background to have a greyish background with a slight gradient. I’ll make a pixel wide pretty long strip that goes from white to nothingness on top of an actual grey background. On top of all that, I’d love to add some kind of a swirl on the left and a nice swirl in the right corner. Let’s see how that’ll look in code:

.bgr {
background: rgba(115, 115, 115, .8);
background-image:url(gradient.png), url(swirl1.png), url(swirl2.png);
background-position: top left, top left, bottom right;
background-repeat:repeat-x, no-repeat, no-repeat;
background-attachment: fixed;
}

Easy concept. I used the original backbground property and used the new rgba() value for the background. Next I used the background-image property for the images, all separated by commas, don’t forget that. Next I declared the background-position and background-repeat the same way. The background-attachment is for fun.

Now since I’m really lazy and I don’t feel like creating my own swirls in illustrator, I used some wonderful free online brushes. Also, I had a lot of trouble making this work in short-hand (ie. background: url(gradient.png) top left repeat-x, url(swirl1.png) top left no-repeat, and so on). Unfortunately, it only works with Webkit (ie Safari and Chrome) and I haven’t been able to make it work on Firefox. It should work in coming Firefox releases. Check out my testing site for a live example.

Here’s what it should look like:

It looks pretty nice, doesn’t it? I like it. I’ll probably employ it in some future websites too.

---

Let’s look at background-origin and background-clip. The origin comes first in the title, so it will come first in my explanation. Basically, origin tells the browser where the background image should originate. Should it start where the border ends? Should it start where padding ends? Should it start where the content ends?

This concerns the box theory and adds to the complications of it. This also concerns the background-position property that I used in the previous example. CSS3 Info has a great article that shows all of the different results you can get with clip and origin properties. It’s useful, but not the best. I’ll be using the following image to indicate all the different background origins:

The different values you can use are border-box, padding-box, and content-box. While using this property add the “-moz-” and “-webkit-” prefixes to the properties. Once again, I’m having trouble making it work in firefox. It might work for you, but it didn’t work for me. Here’s the CSS I used:

background: url(swirl3.png) no-repeat bottom right;
background-origin: padding-box;
-moz-background-origin: padding-box;
-webkit-background-origin: padding-box;

Of course, I used different positions for different divs. I added some extra borders and padding for effect but go ahead and check out my example site. If it doesn’t work, here’s a screenshot:

Here’s the rundown of the properties:

1. border-box
2. padding-box
3. content-box

As you can see, border-box puts the background image into the border, padding-box sits right outside the border (or at the end of the padding), content-box puts the background inside the content area.

Let’s look at background-clip which has two different values, border and padding. Using border will enable the background to be visible ABOVE the border area. Padding box does the same except the background will be visible above the padding area and not the border area.

I’ll use the following swirl to show you how this works:

The first example with the green swirl used the padding while the next one will use the border value. You won’t see much difference in most of the swirls (ie between the green and the red) but when you look on the bottom left red swirl, you will notice that part of the swirl is visible in the dashed border. That is basically all the difference you will see between the border and padding values. Here’s a close-up picture:

Here’s the green swirl:

Once again though, this feature fails in Mozilla. Here’s the CSS for the last DIV on the page (where the advertisement is):

background: url(swirl4.png) no-repeat top right;
 -webkit-background-origin: content-box;
 -moz-background-origin: content-box;
 -moz-background-clip: border;
 -webkit-background-clip: border;
background-clip: border;

---

Well, here’s my conclusion. I found some great use for the multiple backgrounds on my testing site. Actually, all of them are pretty useful. I wish there was more support for it. I may have erred but it seems unlikely since all of the properties show up alright in Chrome. I hope you enjoyed my tutorial and look out for some more in the future!

Here’s the final website: