{"id":3464,"date":"2011-10-24T06:30:00","date_gmt":"2011-10-24T12:30:00","guid":{"rendered":"http:\/\/www.vanseodesign.com\/?p=3464"},"modified":"2011-10-24T06:30:00","modified_gmt":"2011-10-24T12:30:00","slug":"background-properties","status":"publish","type":"post","link":"https:\/\/vanseodesign.com\/css\/background-properties\/","title":{"rendered":"CSS Background: There’s More To Know Than You Think"},"content":{"rendered":"

You likely use css backgrounds<\/a> in every site you build. You give an element a background color and tell another element to let a background image repeat. How much do you know about all the other background properties?
\n
\nDid you know you can control where in the background an image is painted or that you can even specify which part of an element is the background?<\/p>\n

I’d like to run through the different background properties<\/a> css3 offers us. Some of what follows I’m sure will be familiar to you. Some will probably be new. Hopefully this post will give you a greater understanding of a property you use all the time.<\/p>\n

Note:<\/strong> As mentioned in the comments below support for some of what’s in this post is less than I originally thought.<\/p>\n

The space and round values don’t appear to be working (outside of Opera) for the background-repeat property and issues have been reported with background-position. My apologies for not being aware of these limitations earlier.<\/p>\n

\"Background<\/a><\/p>\n

CSS Background<\/h2>\n

The first thing to understand is what does css consider as background and we’ll turn to the css box model with its content, padding, border, and margin for an answer.<\/p>\n

Everything except margins is considered background, though we’ll see in a bit that css3 allows us to alter this background painting area to some degree,<\/p>\n

Backgrounds can be transparent (the default), filled with color, or filled with images. Different properties determine which is used and in the case of images further properties are used to determine how the images are sized, positioned, and more.<\/p>\n

In practice you’ll often use the background shorthand to set all these properties, but let’s look at them individually. I’ll come back to the shorthand later in this post.<\/p>\n

background-color<\/h3>\n

I’m sure you’ve set a css background color before. For those who’ve never used it here’s one way you’d set a background color on paragraphs.<\/p>\n

{code type=css}
\np {background-color: red;}
\n{\/code}<\/p>\n

You can also use hexadecimal or rgb notation instead.<\/p>\n

{code type=css}
\np {background-color: #f00;}
\np {background-color: #ff0000;}
\np {background-color: rgb(255, 0, 0;)}
\n{\/code}<\/p>\n

All 3 lines of css above are equivalent and set a red background on the paragraph.<\/p>\n

One last way to specify a background-color is rgba<\/a>. The “a” stands for alpha transparency and is set as a fraction between 0 and 1, with 0 being fully transparent and 1 being fully opaque.<\/p>\n

{code type=css}
\np {background-color: rgba(255, 0, 0, 0.5);}
\n{\/code}<\/p>\n

The above sets the background to the same red as before, though at 50% opacity. Browser support for rgba<\/a> isn’t as good as rgb, but the fallback is generally to present the color as completely opaque or with an “a” of 1.0.<\/p>\n

The one thing you might not be familiar with is that the background-color will be clipped according to the background-clip property.<\/p>\n

We’ll get to this property shortly, but for now know it’s a way to prevent color from appearing behind the border of your element or even behind the element’s padding.<\/p>\n

\"Background<\/a><\/p>\n

background-image<\/h3>\n

I’m sure you’ve also set a background-image before. What’s nice is that in css3 we can add multiple images like so:<\/p>\n

{code type=css}
\nbody {background-image: url(“image1”), url(“image2”), url(“image3”)}
\n{\/code}<\/p>\n

The above adds 3 background images to the body of a document.<\/p>\n

Each image creates a new background layer<\/a> so the images sit one on top of another. A value of none, an image with 0 width and height, or an image that fails to download still creates a new layer, though one that doesn’t show an image.<\/p>\n

The first image in the list is seen as being closest to the viewer and each successive image is one layer further into the background. If a background color is also specified, it’s painted below all images and is furthest from the viewer.<\/p>\n

There are two important guidelines you should follow when setting background-images.<\/p>\n