The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Need help repeating images

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #27910

    Hi to all CSS gurus,

    I just want to ask about repeating images without fixed size.
    Let’s say I have header with div inside.

    my HTML code


    my CSS code

    #header {width:960px; overflow:hidden;}
    #header-left {width:12px; height:70px; background:url(images/header-l.jpg); float:left;}
    #header-middle {height:70px; background:url(images/header-m.jpg) repeat-x;float:left;}
    #header-right {height:70px; width:12px;background:url(images/header-r.jpg); float:right;}

    My question is:
    How can I make header-middle image repeat itself automatically to fill available width without specifying fixed width?
    In my case my header-middle images only 12px width and I want to repeat it horizontally.

    Thanks in advance


    Well it looks like you’ve set the total width for your header to 960px, and you’ve got our left and right divs images at certian px, so im guessing you want your 960px – 82px which equals 878pxs remaining for your middle section.

    Not sure why you wouldn’t use just a single image for the entire header or just make your middle div images 878px.

    Do you have a link or example of the site/image? Not sure what your trying to do.



    As above example, I want my #header-middle repeat-x automatically to fill available width left without specifying width for #header-middle.So whenever I come back later and decided to change my header container width to 1000px, I don;t have to change my #header-middle width. The prupose is I want to reduce file size. I found the same way Rockettheme did but I can’t figure out how to do it since Rockettheme didnt specify middle div width but the div repeat-x itself to fill available space.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.