Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-25-2011, 08:10 PM   PM User | #1
JAG
New Coder

 
Join Date: Feb 2011
Posts: 51
Thanks: 17
Thanked 0 Times in 0 Posts
JAG is an unknown quantity at this point
Question CSS background Property Works in Opera, not in FF or IE

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;
}

Last edited by JAG; 07-25-2011 at 08:21 PM..
JAG is offline   Reply With Quote
Old 07-26-2011, 12:11 AM   PM User | #2
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,383
Thanks: 18
Thanked 350 Times in 349 Posts
sunfighter is on a distinguished road
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/
sunfighter is offline   Reply With Quote
Old 07-26-2011, 12:52 AM   PM User | #3
JAG
New Coder

 
Join Date: Feb 2011
Posts: 51
Thanks: 17
Thanked 0 Times in 0 Posts
JAG is an unknown quantity at this point
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.
JAG is offline   Reply With Quote
Old 07-26-2011, 01:02 PM   PM User | #4
vikram1vicky
Regular Coder

 
Join Date: Jul 2011
Location: India
Posts: 496
Thanks: 3
Thanked 57 Times in 56 Posts
vikram1vicky is an unknown quantity at this point
Quote:
Originally Posted by JAG View Post
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

Quote:
Value Error : 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
vikram1vicky is offline   Reply With Quote
Old 07-26-2011, 06:30 PM   PM User | #5
JAG
New Coder

 
Join Date: Feb 2011
Posts: 51
Thanks: 17
Thanked 0 Times in 0 Posts
JAG is an unknown quantity at this point
Quote:
Originally Posted by vikram1vicky View Post
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.
JAG is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 09:14 AM.


Advertisement
Log in to turn off these ads.