Multiple background images ? (CSS)

Discussion in 'Web Design and Development' started by Nitromaster, Jan 9, 2009.

  1. Nitromaster macrumors 6502

    Joined:
    Jan 7, 2007
    Location:
    Ireland.
    #1
    I'm currently playing around with the Stylish extension for firefox + Bebo.com.
    Having a bit of a problem though.
    I want to have an large header image at the top of the page. Then I want to display another background image scrolling down the page.
    Example page
    http://www.bebo.com/Profile.jsp?MemberId=1

    Code:
    .lyt-multi {background-image:url(http://i1.bebo.com/047a/9/file/20081212/8292201634.jpg);background-repeat:no-repeat;background-position:center top; background-color:black;}
    #bd.page-body {background-image: url(http://i1.bebo.com/047a/13/file/20081209/8273737041.jpg); background-position:top center; background-repeat:repeat-x; background-attachment:fixed; background-color:black;}
    #top_box {display:none;}
    #under_box {display:none;}
    
    .lyt-multi is the centre bit, main profile bit. Where I want the main picture (980x700) centered top, non-repeating, and then an image (say 980x50) repeating itself going down the page.
    bd.page-body = the outside of the profile to the left/right for the record.

    I can't figure out how to get the 980x50 image to repeat itself , css3 seems to support multiple background images but this is of course no use until it's finalized.

    Anyone have an idea of a way to do this in css? Or something else i could apply the 980x50 background to for it to repeat downwards? (some other div maybe)

    Thanks
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Using repeat-y should make it repeat down the page. Also, remember with Stylish you must make everything !important so it works properly. I like using Stylish myself.
     

Share This Page