...

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



JAG
07-25-2011, 08: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, 12: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, 12: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, 01: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, 06: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum