Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    JAG
    JAG is offline
    New Coder
    Join Date
    Feb 2011
    Posts
    63
    Thanks
    24
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    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/

  • #3
    JAG
    JAG is offline
    New Coder
    Join Date
    Feb 2011
    Posts
    63
    Thanks
    24
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    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

    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

  • #5
    JAG
    JAG is offline
    New Coder
    Join Date
    Feb 2011
    Posts
    63
    Thanks
    24
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •