CSS Background Properties: possible values, default values, browser support and DOM

Everything you could possibly want to know about CSS Background Properties, including default values, browser support, targeting the DOM, and what to look for in CSS3.

There are 5 attributes controlling background images, with a few more being added when we have CSS3 support. This blog post goes over all the existing and future attributes, targeting them with the DOM, and lets you know of bugs you may find when implementing backgrounds.

  1. background-attachment
  2. background-color
  3. background-image
  4. background-position
  5. background-repeat
  6. CSS3 background properties that may become relevant

and a shorthand: background, which includes the above attributes.

Each property has a list of possible values. Many developers use the "background:" shorthand. I advocate against using the shorthand, as I spend a lot of time correcting other people’s code when they forget to declare all the possible values, and therefore inadvertently set some of the attributes to their default values, when that was not their attention. For example, in th CSS reset script I recommend, the reset sets background-repeat: no-repeat;. When this reset value is included, if a coder writes background: url(myImg.gif); the background-repeat value gets reset to the default value of repeat — repeating along the x and y axis — which is almost never the intended value. Note that none of the background properties are inherited by default, though several do have "inherited" as a value option. See below for more information on the background shorthand.

background-attachment

The background-attachment attributes sets whether the background-image scrolls with the the document or remains fixed at the same location within the viewport. For example, if you include a "fixed" background image in a div, as the div scrolls up the page, the background image will stay in the same spot relative to the viewport, and will exit off the bottom edge of the div, disappearing from view, as the div moves up the screen. The default value is scroll. IE6 is the only grade-A browser that fails to support it correctly.

Property Values for background-attachment

background-attachment: fixed | scroll | inherit | local;

Browser support for background-attachment

  Internet
Explorer 6
Internet
Explorer 7
Internet
Explorer 8
Firefox 2 FireFox 3 Safari 3
fixed behaves as "scroll" behaves as "scroll" works, but the placement of the image is off.      
scroll behaves as "local" behaves as "local"        
inherit            
local Works because it inherits scroll, which erroneously renders as local. Works because it inherits scroll, which erroneously renders as local.        

background-attachment:fixed;
In elements with background images that are background-attachment:fixed; the position of the fixed image is relative to the viewport (the browser), not the element that it is in. In other words, if you declare a fixed background image, the image is positioned relative to the document window rather than relative to the element. Because of this, as you scroll thru the page, and your element with the background image that is fixed moves thru the viewport, the background image will come into view as it passes over the location of the otherwise hidden background image.

Note: background-attachment: local is a new value added in CSS3. "Local" is basically how "scroll" has been acting on scrolling elements in IE6 and IE7. An example is a div with "overflow: scroll." Generally, as you scroll thru to div, the background image stays exactly where it was initially in the scrolling div’s viewport. Using local, the div’s background image scrolls with the element’s content. In the case of ‘scroll’, the background does not scroll with the element’s content, except in non-compliant IE6 and IE7. In the case of ‘local’, the background scrolls along with the element’s content.

Bugs:

  • IE8 does suppord fixed and not local, but get’s the positioning of the background image wrong.
  • IE6 and IE7 mistakingly renders fixed as scroll and scroll as local. Since scroll is the default, scroll renders as local, and the browser ignores the keyterm local, you can actually use local in these browsers as it will render local correctly.

DOM

document.getElementById("myID").style.backgroundAttachment

background-color

Sets the background color of the element. The default value is transparent. This attribute, like all other background attributes, is NOT inherited. If you set a background image that is a transparent gif or transparent PNG, the color will show thru the transparent pixels. All browsers support background colors. The default value is "transparent". In using RGB instead of Hex values, you can either use integer range 0 – 255 or percent values of 0-100%. If you go over (300 or 110%), the browsers should reduce the value to the maximum allowable value (255 or 100%).

Note that if you mix RGB between integer and percents, some browsers will fail. If you include the wrong number of characters in a hex value, some browsers will ignore the declaration.

You can set the opacity or transparency level of the background color using background-color: rgba(255, 255, 255, 1);, where 255 is an integer between 0 and 255 or a percent value, and the 1 is any value between 0 and 1, with 0 being completely transparent and 1 being completely opaque. test page

IE6 and IE7 get "partially compliant" for RGB, since they erroneously display color if integers and percents are mixed. This may be a good thing, but it’s not in the specifications.

Note: Do not using mixed values in RGB, and do not use RGBA without browser targeting: both will fail completely in non-supporting browsers.

Note: IE6 sometimes completely chokes on background-color: transparent. For example, if you declare background-color: transparent on pop-out in a suckerfish menu, the links in that menu will not be clickable and it will display as black.

Property Values for background-color

background-color: transparent | rgb(255, 255, 255) / rgb(r%, g%, b%) | rgba(255, 255, 255, 1) /  rgba(r%, g%, b%, 1)  | #fff | #123456;

Browser support for background-attachment

  Internet
Explorer 6
Internet
Explorer 7
Internet
Explorer 8
Firefox 2 FireFox 3 Safari 3 Opera 9.5
transparent              
rgb(r, g, b) Renders with mixed values Renders with mixed values      
#fff              
#ffffff              
rgba(r, g, b, a) ignores the entire call ignores the entire call ignores the entire call ignores the entire call     ignores the entire call

DOM

document.getElementById("myID").style.backgroundColor

background-image

Property Values for background-image

background-image: inherit | none | url(relative to CSS);
background-image: url(relative to css), url(second image); // CSS3 allows for multiple background images.

Browser support for background-image

  Internet
Explorer 6
Internet
Explorer 7
Internet
Explorer 8
Firefox 2 FireFox 3 Safari 3 Opera
inherit if url doesn’t work, neither does inherit if the background image on parent doesn’t work, neither does inherit if the background image on parent doesn’t work, neither does inherit        
none              
url needs to have adequate size to work IE7 zoom function does not increase the size of background images IE7 zoom function does not increase the size of background images        
url, url              

background-image browser bugs

IE6 has several bugs with background images that are worth noting.

  1. The area of an element with a background-image must be at least 2500 pixels, or the image may not display. Fix by giving area or hasLayout=true.
  2. The repeated background image position starts and ends at the inside of the border and is therefore not seen thru a dashed or dotted border. Compliant browsers start the image at 0 0, but repeat it thru the border on all sides.
  3. For background images on links, IE6 fetches the image from the server for every "hover", causing flickering.
  4. IE6 does not handle transparency of PNGs. Use proprietary filter to get around this bug
  5. If the background-image of a link is a transparent PNG, the link will not work in IE6.
  6. Using background images on <li>, <dd> and <dt> the background image may not render, especially if the list is placed within a floated, relatively-positioned parent.

IE7 and IE8 has bugs too:

  1. The IE7 zoom function does not increase the size of background images.
  2. Same as IE6, in IE7 and IE8 the repeated background image position starts and ends at the inside of the border and is therefore not seen thru a dashed or dotted border. Compliant browsers start the image at 0 0, but repeat it thru the border on all sides.

DOM

document.getElementById("myID").style.backgroundImage

background-position

Background position takes two values: left and top (in that order!) of the background image. If you only declare one attribute, the outcome depends on the type of value used (percent, measurement or keyword). The default value is "top left", well, actually, "0 0".

NOTE: If you are using anything other than the keyterms, make sure the order is LEFT and TOP in that order.

Property Values for background-position

background-position: bottom | center | inherit | left | right | top | 10px 10px | 50%  50%;

Browser support for background-position

  Internet
Explorer 6
Internet
Explorer 7
Internet
Explorer 8
Firefox 2 FireFox 3 Safari 3
left/top            
right/bottom            
center            
inherit            
center            
px            
%            

Note that background position with percent values can be confusing! A background-position of X% will place the pixel that is X% from the left of the image at the pixel that is X% of the way in from the left of the element in which it is placed.

  • For 0, the 0%, or left/top most pixel, will be placed at 0%, or the left/top.
  • For 100%, the 100%, or right/bottom most pixel of the bg image, will be placed at 100%, or bottom/right of the element.
  • For 50%, the middle of the image will be placed in the center of the element.

Any other percentage value is a bit more confusing:

A background-position of 25% will place the pixel that is 25% from the left of the image at the pixel that is 25% of the way in from the left of the element in which it is placed. If your image is 1000px wide, the pixel at 750px will be placed 75% in. In an element that is 1000px wide, it will be placed at 0,0. If your parent is 2000px, the pixel at 75% is 1500, so the 1000px background image will go from px 750 to 1750. Likely, that’s not what you want.

Because of this, know the width of the image and the width of the element before using percent (other than 0, 50% and 100%) when creating liquid layouts. If you have a content area that is 80% of the viewport, to put a faux column background image for a 25% width column, create a background image with a ratio of 1:3 that is wide enough to cover a wide scree browser., and place the background-position-x: 20%; (80% * 25% = 20%).

DOM

document.getElementById("myID").style.backgroundPosition

Background-position-x

Although not part of the W3C specifications, backgroundPositionX and backgroundPositionY are part of the DOM and supported by some browsers. Colors are not used in the following table, since I couldn’t figure out if green should mean it is supported or if green means it follows W3C specifications.

Property Values for background-position-x

background-position-x: center | inherit | left | right | px/em | %;

Browser support for background-position-x

  Internet
Explorer 6
Internet
Explorer 7
Internet
Explorer 8
Firefox 2 FireFox 3 Safari 3 Opera
% Supported Supported Supported     Supported  
px (length) Supported Supported Supported     Supported  
left / center /right Supported Supported Supported     Supported  

DOM

document.getElementById("myID").style.backgroundPositionX

background-position-y

Property Values for background-position-y

background-position: bottom | center | inherit | top | 10px | 2em | 50%;

Browser support for background-position-y

  Internet
Explorer 6
Internet
Explorer 7
Internet
Explorer 8
Firefox 2 FireFox 3 Safari 3 Opera
% Supported Supported Supported     Supported  
px (length) Supported Supported Supported     Supported  
left / center /right Supported Supported Supported     Supported  

DOM

document.getElementById("myID").style.backgroundPositionY

Background-repeat

Property Values for background-repeat

background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;
  Internet
Explorer 6
Internet
Explorer 7
Internet
Explorer 8
Firefox 2 FireFox 3 Safari 3
inherit            
no-repeat            
repeat            
repeat-x / repeat-y            

DOM

document.getElementById("myID").style.backgroundRepeat

The background shorthand.

The background shorthand (or shortcut) attribute enables the declaration of all five background attributes in one statement. The values can be in any order, but are generally in the color, image, attachment, position and repeat order. If an attribute value is not specified, the value gets reset to the default value, which is why I recommend against using the shorthand. If you are going to use the shorthand, I recommend always following the CIAPR order to make debugging easier. The attribute values should be separated by a space. See the above attribute descriptions for default values and quirks (such as background-position attribute order).

Property Values and order for the background shorthand

background: background-color | background-image | background-attachment | background-position | background-repeat

Default Values for background when values aren’t explicitly declared

Property Internet
Explorer 6
Internet
Explorer 7
Internet
Explorer 8
Firefox 2 FireFox 3 Safari 3
background-color transparent transparent transparent transparent transparent transparent
background-image none none none none none none
background-attachment "local" "local" scroll scroll scroll scroll
background-position 0 0 0 0 0 0
background-repeat repeat repeat repeat repeat repeat repeat

DOM

document.getElementById("myID").style.background

CSS3 Background Properties

The specifications don’t seem to be finalized, but it would seem that the first two will be incorporated, and the second two are being worked on (simply my guess, I don’t know for sure).

  1. background-clip
    With possible values of border | padding, determines whether the background position is relative to the border or the padding, specifying whether an element’s background extends underneath its border. . This only has any visual effect when the border has transparent regions (because of border-style) or partially opaque regions; otherwise the border covers up the difference. The default value is "border", which is the effective default of all current browsers. Firefox 3 supports -moz-background-clip. Safari’s implementation is -webkit-background-clip.
  2. background-origin
    Determines how the ‘background-position’ is calculated. Takes one or two parameters: border | padding | content. With a value of ‘padding’, the position is relative to the padding edge (’0 0′ is the upper left corner of the padding edge, ’100% 100%’ is the lower right corner). ‘Border’ means the position is relative to the border edge, and ‘content’ means relative to the content edge.

    Each comma-separated value applies to one image of ‘background-image’. This is useful only in safari at this point… but haven’t tested to see if supported. Safari’s current implementation is -webkit-background-origin. Mozilla is supporting -moz-background-origin. Has no impact when background attachement is set to fixed.

  3. background-size
    see background-size specifications at the W3C
  4. background-break
    see background-break specifications at the W3C
  5. background-inline-policy
    Mozilla only, pecifies how the coordinate system for the background-position of an inline element is chosen when the content of the inline element wraps onto multiple lines. -moz-background-inline-policy values include bounding-box | continuous | each-box, with a default of continuous. Property has no effect when background-attachment is fixed.
This entry was posted in Character Entities, CSS (including hacks), Cursors & Icons, IE7, SEO. Bookmark the permalink.

6 Responses to CSS Background Properties: possible values, default values, browser support and DOM

  1. Pingback: pligg.com

  2. estellevw says:

    I totally forgot to mention a “warning” on background images when using percents for background position.

    the spec reads:

    “Intrinsic dimensions expressed as percentages must be resolved relative to the dimensions of the rectangle that establishes the coordinate system for the ‘background-position’ property.

    If the image has no intrinsic dimensions and has an intrinsic ratio the dimensions must be assumed to be the largest dimensions at that ratio such that neither dimension exceeds the dimensions of the rectangle that establishes the coordinate system for the ‘background-position’ property.

    If the image has no intrinsic ratio either, then the dimensions must be assumed to be the rectangle that establishes the coordinate system for the ‘background-position’ property. ”

    loosely translated into English, a background-position of X% will place the pixel that is X% from the left of the image at the pixel that is X% of the way in from the left of the element in which it is placed.

    For 0, the 0%, or left/top most pixel, will be placed at 0%, or the left/top.

    For 100%, the 100%, or right/bottom most pixel of the bg image, will be placed at 100%, or bottom/right of the element.

    For 50%, the middle of the image will be placed in the center of the element.

    That’s all good….

    However, other percentages likely will confuse you!

    A background-position of 25% will place the pixel that is 25% from the left of the image at the pixel that is 25% of the way in from the left of the element in which it is placed. If your image is 1000px wide, the pixel at 750px will be placed 75% in. In an element that is 1000px wide, it will be placed at 0,0. If your parent is 2000px, the pixel at 75% is 1500, so the 1000px background image will go from px 750 to 1750. Likely, that’s not what you want.

    Because of this, you will always want to know the width of the image and the width of the element before using percent (other than 0, 50% and 100%) in liquid layouts will confuse the @#$% out of you.

  3. estellevw says:

    Added my omission to the content….

  4. Andrew says:

    Hey,

    My background repeats fine in Firefox & IE but not in the new Google Chrome.

    Any ideas?
    ~ Andrew
    Thanx.

  5. estellevw says:

    Hi Andrew. I haven’t tested Chrome and all the background properties yet. My assumption is that since Chrome uses the same codebase as Safari 3.1 (well, slightly older, but very similar), that it should act like Safari 3.1 for the above values and properties.

    the link you gave as your URL: i see the background repeating in chrome. If that isn’t the URL you meant, please let me know and I”ll take a look.

  6. Andrew says:

    Hello,

    Just wanted to let you know I fixed the background so it works in Chrome. I was using a .jpg with x & y set to repeat, (kinda silly for a solid color – I’ll admit). I set the CSS as a solid color, (background-color: #ff7021;). That fixed it in G-Chrome.

    Thanks for looking at my site, Sorry you never saw the error in full swing! Cheers…
    ~ Andrew

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>