Grow your CSS skills. Land your dream job.

Background Desires

Published by Chris Coyier

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:

background:
         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

background:
         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.

Comments

  1. In CSS3, you’re missing background-size, background-attachment, background-clip, background-origin,

    All of which, along multiple background images, works in Opera 10.50 (pre) alpha.

    • Eddy
      Permalink to comment#

      Actually background-attachment is CSS1 and Chris has correctly mentioned it in the “what we have now” section.

  2. Permalink to comment#

    Hi Chris,

    i really like the idea of background-opacity! This would be a very handy feature. Maybe you should suggest it to the W3C :)

    Btw. Firefox 3.6 RC1 now also supports multiple backgrounds.

    Greetings
    Christoph

  3. Currently there are five major browser layout engines:

    Trident used for Internet Explorer 8, Gecko by the Mozilla Foundation, KHTML developed by the KDE project, WebKit an open-source fork of KHTML by Apple Inc, and Presto developed by Opera Software.

    Surely as these engines mature more emphasis should, in my humble opinion, be placed on configuration and modularity.

    For example, an XUL module that is interpreted in real time that declares user defined layout characteristics like background-opacity and background-anchor.

    Not sure about security ramification in light of current events, but something that places less restraints on designers and developers alike.

  4. silvers
    Permalink to comment#

    yeah i love idea of background opacity. in fact it’s such a great idea that i am surprised it’s not already in practice.

    the idea of animating in and out with jQuery would make websites look far cooler with minimal effort.

    I needed this refresh on backgrounds as well which has started me thinking about background-attachment and the tutorial you didn’t on full size backgrounds that change as the browser changes.

  5. Permalink to comment#

    fade-in animation sounds cool, like a more elegant way of loading a page in, the only way to do this now is using an interlaced PNG-image, but PNG is heavier than JPG so not really the best solution either

    I definitely vote for the anchors for background-position, why shouldn’t those exist for background while they do for normal elements?

  6. TiGR
    Permalink to comment#

    Opera 10.50 supports multiple backgrounds also.

  7. Background anchor would be pretty awesome, I’m sick of setting the left position on a background image to 99%.

    A little more fine-grained positioning for that would be nice.

  8. Permalink to comment#

    background-opacity sounds like a great idea! I’m working on a project, and that’s actually just what I would need.

  9. Permalink to comment#

    demo ?

  10. Dan
    Permalink to comment#

    Just a suggestion… You might want to put a little disclaimer next to the sample code saying that this code is purely hypothetical and won’t work in any browser… There are a lot of people who probably won’t read the article and will try to implement the code… and then they’ll probably start writing you about why it doesn’t work.

  11. Permalink to comment#

    Hey Chris… I like your suggestion with background anchor. For a minute i read, wait a minute background position does that already. Then I realised the anchor would be the baseline to start from. Which would be very useful.

    The amount of times when working with sprites you need to go to Photoshop, draw a rule way over from left or from image start pointing to left to get the ruler unit position. How nice would it be to say.

    Position all navigation in the left 200px of your 400px in width sprite and then position all structure elements in the right hand side.

    Then you can set a an anchor or top left for all navigation and top right for all structure divs.

    Good job as every, you have a keen eye on the market.

  12. Permalink to comment#

    Background opacity really should be added… I hate setting the opacity of an element only to remember that this then affects all the children of the elements too. RGBA helps and adding the CSS3 animations for webkit/firefox does mean you can animate it.

  13. Euan Mead
    Permalink to comment#

    Very Good Agree with the bg opacity idea. Thanks chris.

  14. Richard R
    Permalink to comment#

    Agreed… Background opacity would be very useful and offer us designers many new ways to be creative without as much code to write.

    You should recommend it to W3C, You’ll have my vote thats for sure.

    Not so convinced with the anchor idea though. I can definatly see your point but like the comment submitted by Pål Strøm, surley you would just consider the top, bottom, left, right to be your anchors and you’d enter your background-position as: top 10px right 10px. This is much easier and better than having a whole new property.

    • Permalink to comment#

      Well that defeats the purpose of the anchor addition. The anchor would be added to you can simply work in increments more easily.

      Lets say you have structure elements on the right of a 400px in height and 400px in width sprite. i don’t know icons or larger shadows could be placed here.

      If you define top left as the anchor you always work from 0 and then position it out. Which is fine, it will get problematic when you have unknown widths and heights to work with regardless. You will always have to go back to the ruler tool.

      However lets say you have navigation in the right portion. In this case you know your nav bars are all 200 in width and 50 in height.

      Here you can define top right as the anchor and just say background positions in the following.

      link: 0 0
      hover: 0 50
      active: 0 100

      and so on. Next say you have a sub navigation which is 30 in height and again 200 in width.

      you’eve already used 150 of the height here. Say the sprite is i don’t know 400 max. Then it may be better to align the sub nav to the bottom. Which takes literally a second when creating the sprite in P Shop or w.e.

      bg anchor: bottom right

      Sub nav links

      link: 0 0;
      visited: 0 30;
      active: 0 60;

      The example isn’t ideal especially if you know the structure side is a maximum of 200 in width, you could simply use the bg position and use 200px as you’re starting point. So all nav elements would be something like

      -200px 0;

      No negatives with anchor right?

  15. Permalink to comment#

    I think background-opacity is a great idea.

  16. Permalink to comment#

    another things i would love is to specify the begin and the ‘end’ in background position, in order to use css sprites at 100% for backgrounds.

  17. Permalink to comment#

    I reeeeeally like the idea with “anc-…”. This is something I have missed for so long. Another thing that would be really great, is if it would be possible to background position a repeating background image, and furthermore; give it four values (top right bottom left), for example: background: url(someImage.jpg) 10px 0 10px 5px repeat-y; This way it would be possible to give a background image some “margin” on all four sides instead of only two (and make it possible for repeating backgrounds as well).

  18. My background desires don’t go much further than dreaming of a day when CSS3 is (nearly) universally supported :). Multiple BG’s on one element would make my XHTML quite a bit cleaner.

  19. The developer relations team from Opera has a few cool CSS3 demos running to :)

    http://dev.opera.com/articles/view/css3-border-background-boxshadow/

  20. Permalink to comment#

    Seems like a pretty rational idea Chris.

    Can i just point out that for css3 you should either out the closing quotes first, and the first last so that you always have opening quotations?

  21. I put my vote in for background opacity. Would be so much cleaner that going for the gif option, or desperately trying to align certain elements together in fixed positions so that you get the desired transparent effect.

    I could think of so many cool things to do with it!

  22. Permalink to comment#

    how about dynamic backgrounds?

  23. Permalink to comment#

    Would be nice to have a resizeable background image property of some sort in CSS3. Whether or not that would be a good idea depends on how you view JavaScript’s purpose I guess.

  24. Permalink to comment#

    Background-opacity isn’t high on my wishlist, but the anchor-idea is great – would love to see something like that introduced!

  25. the current CSS3 features are already quite overwhelming for me :) but i think the background-anchor property can be quite useful

  26. Permalink to comment#

    What about some sort of motion or paralax built in???

  27. background-opacity is really cool..

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".