Background selector declaration in CSS

Question

Hello,

In CSS declaration for a selector is given as:

background-attachment: scroll; 
background-color: transparent; 
background-image: url(/images/ucc/green/btn-part2.gif); 
background-repeat: no-repeat; 
background-position: right top;

I want to optimize the code and change it to:

background: scroll transparent url(/images/ucc/green/btn-part2.gif) no-repeat right top;

My question is, Is this correct way and does it work in IE7/8, Firefox, Safari?

Answer 1

Yes, this is the correct way and it works in all major browsers. You can read more about the CSS background property which can be used to set all background-* properties together.

Update: Yes, the following rule will work:

background
{
    background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll 20px 40px;
}

Except the browser will attempt to apply this rule to an <background> element in the DOM. And since there's no such element in HTML, the rule will never be applied to anything. :-) So you have to change the rule selector to select the container element you want to apply the background property to:

div#myDivIWantToSetBackgroundTo
{
    background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll 20px 40px;
}

Btw, you can play with various values for the background property on the W3School site.

Answer 2

Yes it works. Take a look at point 6 here - http://www.domedia.org/oveklykken/css-shorthands.php

Answer 3

http://www.w3schools.com/css/css_background.asp

When using the shorthand property the order of the property values are:

* background-color
* background-image
* background-repeat
* background-attachment
* background-position

background
{
    background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll right top;
}