PDA

View Full Version : CSS background Property Works in Opera, not in FF or IE



JAG
07-25-2011, 09:10 PM
Hi guys,

I'm trying to use the shorthand CSS background property, including all the new CSS3 properties. For some reason, it only works in Opera, not in IE (which I kinda expected), but surprisingly it doesn't work in FF5 either, my main browser.
What am I doing wrong?

.home_page_item {
background: url(/images/metal_plate_bg.jpg) center / 100% 100% no-repeat fixed padding-box border-box transparent;
}

sunfighter
07-26-2011, 01:11 AM
It's background: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>

Not sure what the 'padding-box border-box transparent' you have is.
Not sure if this has to be the above order.
And I think the url of url(/images/metal.... should be url(./images/

JAG
07-26-2011, 01:52 AM
Yes, those three values are for background-size, background-origin and
background-clip, the three new background properties starting with CSS3. Problem is, both FF5 and IE9 are supposed to support them, but I can only get it working in Opera with the new, extended shorthand method.

vikram1vicky
07-26-2011, 02:02 PM
Hi guys,

I'm trying to use the shorthand CSS background property, including all the new CSS3 properties. For some reason, it only works in Opera, not in IE (which I kinda expected), but surprisingly it doesn't work in FF5 either, my main browser.
What am I doing wrong?

.home_page_item {
background: url(/images/metal_plate_bg.jpg) center / 100% 100% no-repeat fixed padding-box border-box transparent;
}



I tested your code on CSS validator and got following error


Value Error : background (http://jigsaw.w3.org/css-validator/nullcolors.html#propdef-background) border-box is not a background value : url(/images/metal_plate_bg.jpg) center/100% 100% no-repeat fixed padding-box border-box transparent url(/images/metal_plate_bg.jpg) center/100% 100% no-repeat fixed padding-box border-box transparent

JAG
07-26-2011, 07:30 PM
I tested your code on CSS validator and got following error

I removed the offending code, tested the page again, and still no enchilada. :-(
Even tried using other values for background-clip: content-box and padding-box. Guess I'm forced to stick with the longhand method; I was trying to optimize my code. If anybody finds the right way to use the shorthand method, let me know.