Unknown Features of CSS Background Property

CSS background property is used on almost each and every website either in shorthand notation background:... or individually as background-image: background-color etc. But what we know about this property seems to be inadequate, there is more to learn about it. Apart from recent addition of multiple background image feature, there are whole set of additional feature that exists within CSS background property, which we must know.

For example, it was surprising to know that possible values of background-repeat property not only include, no-repeat, repeat-x, repeat-y, repeat but also we can use values like space and round to get more variation in background image placement. (See below for description)

Also do you know that background-attachment propertyhave value called local which fixes the image position with content, i.e. scrolls the image with the content. There are lot more similar unknown features attached to CSS background property. I learned about such unknown features through Steven Bradley's article "CSS Background: There’s More To Know Than You Think".

Here is the brief list of rarely used CSS background property that you can consider using in your next project.

  • background-color
  • background-image
    • url(), url() - Specify multiple images. not supported below IE9.
  • background-repeat
    • space — the image will be tiled to fill the background with as many complete images as possible and then image will be spaced evenly with first and last images touching the edge of element.
    • round — the image will be tiled to fill the background with as many complete images as possible and then image scaled to fit the area exactly.
  • background-attachment
    • local — the image scrolls with the element’s content. It’s fixed to the content.
  • background-size
    • contain — scales the image while preserving its aspect ratio to the largest size that both height and width can still fit within the background area
    • cover — scales the image while preserving its aspect ratio to the smallest size that both height and width can still fit within the background area

Bit About Background Property Shorthand

I very much use background property shorthand as it takes up less bytes and looks neat, but what I found is that the way I was sequencing the property values one after the another was incorrect. Placing color at first is wrong according to the W3C spec and must always be at the end. This is because of the way the background property works, it renders the layer one below another from left to right, so the background-image specified at first place is on top of all other images. As color is always at the last layer (i.e. furthest from user) it should always be specified in the end. The shorthand syntax is

background: background-image background-position / background-size background-repeat background-attachment background-origin background-clip color;

Use comma to specify multiple images, with only last set having color specified.

Read more on CSS background property.

This entry was published on 1st Nov, 2011.