Multiple background images ? (CSS)

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

  1. Nitromaster macrumors 6502

    Jan 7, 2007
    I'm currently playing around with the Stylish extension for firefox +
    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

    .lyt-multi {background-image:url(;background-repeat:no-repeat;background-position:center top; background-color:black;} {background-image: url(; 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. = 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)

  2. angelwatt Moderator emeritus


    Aug 16, 2005
    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