Grow your CSS skills. Land your dream job.

Need help repeating images

  • # February 8, 2010 at 4:03 am

    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

    Code:

    my CSS code

    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

    # February 8, 2010 at 1:24 pm

    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.

    # February 9, 2010 at 2:10 am

    [img]http://img694.imageshack.us/img694/9052/demohi.jpg[/img]

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".