Background Desires

Avatar of Chris Coyier
Chris Coyier on

The background property is a major player in what makes the awesome CSS designs of today possible. There are just a few properties that make it up: background-color, background-image, background-position, background-repeat, and background-attachment. Very simple, very powerful. I have a couple of other ideas that seem to make sense to me: background-opacity and background-anchor.

Things we have now

  • background-color: set a solid color background with keywords, hex codes, rgb, or rgba.
  • background-image: specify a single image to apply to the background.
  • background-position: moves the position of the background to be flush to top or bottom, left or right, or the middle of either. Or, a specific offset from the top left corner.
  • background-repeat: if an image is set as the background, and the image is smaller than the viewable area of the element, this property sets if that image should repeat horizontally (repeat-x), vertically (repeat-y), both (repeat), or not at all (no-repeat).
  • background-attachment: this sets if the background of the element should be attached to the element as normal (scroll) or be attached to the page itself (fixed).

Things we get in CSS3

CSS3 brings multiple backgrounds. In other words, specifying different images to be used on a single element and positioned in different places. Simple and powerful stuff. Imagine a blockquote where you want to use an image of an opening quote in the upper left and an image of a closing quote in the bottom right. Normally you’d need to use an extra div inside and apply one background to each. No longer needed in CSS3:

         url(images/openquote.png) top left no-repeat,
         url(images/closequote.png) bottom right no-repeat;

Multiple backgrounds are working in the latest WebKit browsers (Chrome & Safari), Firefox 3.6+ and Opera 10.5+.

CSS3 also brings background-origin and background-clip. Both of these properties deal with how the box model is used in relationship with the background. Typically a background image will cover padding, but not border. So if you have a 10px bottom border and 100px bottom padding, the background will be in the 100px of padding but not in the 10px of border. background-origin specifies where exactly the “top left” corner should be (top of content, top of border, or top of padding). background-clip specifies where the background should stop (also border, padding, or content). The values for both of them are: padding-box, border-box, or content-box.

Things I think would be cool

background-opacity: 0.0 – 1.0

This setting would change the transparency level of the background (0 being fully transparent, 1 being full opaque). This would affect a background of solid color, image, or a combination of both. We can already set background colors in RGBa and we can already use alpha transparent background images, so perhaps on the surface this doesn’t seem like a major addition. But, being able to set the transparency of a background image at the CSS level would allow us to animate that level via JavaScript or with newfangled CSS transitions. For example, you would be able to fade in a red exclamation graphic on form labels by just adjusting a background-opacity level, rather than needing an additional element to do it. Also consider preloading. Setting a background graphic to background-opacity: 0; would still load the image on page load and be ready to display instantly when needed.

background-anchor: anc-topleft | anc-topright | anc-bottomleft | anc-bottomright

The would be a property to be paired with the background-positon property. If background-anchor was set to top right, and background-position to 10px 10px, the background-image would be positioned 10px down and 10px in from the top right corner of the element. There is currently no way to do this. You can set a background image flush against the top/bottom left/right or center of either, but not a set distance away from anywhere except the top left.

If background-position were to use keywords, background-anchor would be ignored.

Note the weird names for the values, like “anc-bottomleft”. I’m aware this is weird and likely not the way it would be done. I didn’t put the standard choice like “top left”, because that would clash with those same keywords used with background-position in when using the shorthand syntax for background.

Anchored background images would make it easier to something like, say, sliding a background image up from the bottom of an element without having to do height calculations first.

All together now

         white url(images/openquote.png) anc-topleft 10px 10px no-repeat 0.5,
         white url(images/closequote.png) anc-bottomright 10px 10px no-repeat 0.5;

The above code is purely hypothetical and WILL NOT WORK as is.