Two backgrounds - one fixed, one repeat

I don’t have the luxury of using multiple background images in CSS3 so I need to simulate this effect somehow. I’ve done a bit of googling around and experimented with a few things with no luck.

I need to have a 900px width container of dynamic height. The first 500px of this should use a non-repeating background, then everything below this 500px threshold should repeat a different background. It’s very important that it repeats from this point instead of further up to give the simulated effect because the repeating background must meet the non-repeating one in exactly the correct place.

Any ideas?

Dean

Hi, you could nest two elements
<1>
<2>
</2>
</1>

The <1> element could get the repeating background image, and <2> could get a no-repeat image set :). That’s probably the easiest.

It’s very important that it repeats from this point instead of further up to give the simulated effect because the repeating background must meet the non-repeating one in exactly the correct place.
That would work Ryan but there would be no guarantee that the images will seam together at a specific point as per the OP’s requirements.

With CSS2.1 it will take two elements to hook the BG images on and a third element if the text needs to start at the top of the no-repeat image.

This Example I put together seems to meet the requirements.

Using this 500px no-repeat image

And this 10px repeat-y image

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Seaming no-repeat and repeat-y images</title>
<style type="text/css">
body {
    background: #fff;
    font-size:100&#37;;
    margin:0;
    padding:0;
}
#wrap {
    width:920px;
    margin:0 auto;
    padding-top:500px;
    background:red url(images/top.jpg) no-repeat 10px 0;/*500px tall image*/
}
#inner {
    width:920px;
    background:blue url(images/mid.jpg) repeat-y 10px 0;/*10px tall repeating image*/
}
#inner:after {/*float containment for "negative margin child" >(#content)*/
    clear:both;
    content:"";
    display:block;
    height:0;
    font-size:0;
}
#content {
    width:100%;
    float:left;/*remove from page flow*/
    position:relative;/*IE6*/
    margin-top:-500px;/*lift text into #wrap top padding*/
}
p {margin:30px 20px;}
h1 {text-align:center}
</style>

</head>
<body>

<div id="wrap">
    <div id="inner">
        <div id="content">
            <h1>Seaming no-repeat and repeat-y images<br>together at a specific point</h1>
            <p><b>This gray image is a 500px tall no-repeat image.</b></p>
            <p>Some demo filler text to fill the space.</p>
            <p>Some demo filler text to fill the space.</p>
            <p>Some demo filler text to fill the space.</p>
            <p>Some demo filler text to fill the space.</p>
            <p>Some demo filler text to fill the space.</p>
            <p>Some demo filler text to fill the space.</p>
            <p>Some demo filler text to fill the space.</p>
            <p>Some demo filler text to fill the space.</p>
            <p>Some demo filler text to fill the space.</p>
            <p><b>This green image is a 10px tall repeat-y image.</b></p>
            <p>Some demo filler text to fill the space.</p>
            <p>Some demo filler text to fill the space.</p>
            <p>Some demo filler text to fill the space.</p>
            <p>Some demo filler text to fill the space.</p>
        </div>
    </div>
</div>
</body>
</html>

Thanks for the reply Ray. It’s an interesting approach you’ve used and I’ll see if I can apply it tomorrow :slight_smile:

A little late to the party and I may have missed the point but starting the background position at 500px from the top on the wrapper element would ensure that the repeat starts in the right place even if it then repeats up or down.

The inner element would just have the static height non-repeated background image.

Unless I read through this too quickly of course :slight_smile:

I was under that impression too, so I hasted my reply back to Ray, as to not potentially embarrass myself, but I’m glad someone else understood the question as I did :).

Yes, of course that would work! :slight_smile:
I was aware that a BG position would start at the defined point and then travel in both directions. It slipped my mind at the time.

We all understood the question the same, you simply failed to mention BG position at all though.
You could have replied back in the same manner that Paul did. The fact that you were concerned about embarrassing yourself says that you were lacking confidence. :x

As long as the no-repeat image was not a semi-transparent png then the BG position on the repeat-y would allow it to be done with two divs. If for some reason (such as a png) the repeat-y image could not be allowed to traverse both directions then my method would have merit. :wink:

I just reread my post, yes I did forget to mention the background-position (although I was thinking it at the time).

I learned not to post back and start an argument with you because it turns out more cut throat then I’d like :).

The fact that you were concerned about embarrassing yourself says that you were lacking confidence.

Image trickery is probably one of my weaker spots, and I thought about how a browser would impliment my suggestion in my head, and it worked (untested IRL). I typed my previous post as I was going over how I’d do it in my head.

At any rate, had I been asked by the OP/anyone to explain my method once again, I would have reread my original to see what I forgot to say/what needed a clearer wording.

Edit:

It shouldn’t matter to you about my self confidence anyway

Ryan, you and I will get along just fine as long as you don’t throw subtle jabs at me. I’m not here to argue either, I’m here to help where I can.

glad someone else understood the question as I did :slight_smile:
That came across as a “jab” to me since it insinuated that I did not understand the question. I did understand it and i gave a working example, just not the leanest way to do it.

I have always been diplomatic with you and everyone else around here. Just be careful how you craft your replies and you will find that you will gain respect and arguments will dwindle away. :wink:

I just reread my post, yes I did forget to mention the background-position (although I was thinking it at the time).
You were thinking it and “I knew it but it slipped my mind” so we’re even :blush:
Truce!

I still think I found a pretty slick way to do it if a transparent png is involved though.

That wasn’t a jab, that was what it is. You understood it one way (lets call it A). I understood it as B. Paul understood it as B (the original OP question was ambiguous, as you noticed).

I was just glad that I am not going crazy lol :). I’m trying to learn so much stuff at once with rubiks cubes that I don’t do as much CSS as Id hope for (though I’ll be back on track in 2 months hopefully). I’m just afraid I was getting out of practice :slight_smile:

Truce ;).

Off Topic:

It’s slightly evident (if you think about it) that I was thinking background-position at the time because of the specific elements I gave the specific backgrounds to. Had I given the backgrounds to the vice versa elements, then my entire theoretical approach to this would be out the window (even if I didn’t include background-position advice) :stuck_out_tongue:

I did try the background-position before I posted this (background: url(…) repeat-y left 500px;) but I couldn’t get it working. Can you actually repeat a background image but only from a specific position? e.g. repeat after 500px.

Yes, you can start it at 500px down but it will turn around and repeat back up to the top as well as repeating down. In other words it is starting where you told it to but it is painting in both directions.

As mentioned previously, the no-repeat image would need to lay on top of the repeat-y image. The no-repeat image would go on the nested inner div while the repeating image would go on the parent.

I updated my example using transparent png images. That would really be the only time my code would be needed.

This Example uses the simple BG-position for the repeat-y image on the parent.

I set a top border on the repeating image so you can see it starting at 500px down.

You can change the 500px bg position and you can see that the border will show what is going on. It is painting upwards behind the top image also but you just can’t see it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Seaming no-repeat &amp; repeat-y Images</title>
<style type="text/css">
body {
    background:#FFF;
    font-size:100&#37;;
    margin:0;
    padding:0;
}
#wrap {
    width:900px;
    margin:0 auto;
    background:url(images/mid.jpg) repeat-y 0 500px;/*20px tall repeating image*/
    border-left:5px solid #000;
    border-right:5px solid #000;
}
#inner {
    width:900px;
    background:url(images/top.jpg) no-repeat;/*500px tall image*/
    overflow:hidden;
}

p {margin:30px 15px;}

</style>

</head>
<body>

<div id="wrap">
    <div id="inner">
        <p><b>This is a 500px tall no-repeat image.</b></p>
        <p>Some demo filler text to fill the space.</p>
        <p>Some demo filler text to fill the space.</p>
        <p>Some demo filler text to fill the space.</p>
        <p>Some demo filler text to fill the space.</p>
        <p>Some demo filler text to fill the space.</p>
        <p>Some demo filler text to fill the space.</p>
        <p>Some demo filler text to fill the space.</p>
        <p>Some demo filler text to fill the space.</p>
        <p>Some demo filler text to fill the space.</p>
        <p><b>This is a 20px tall repeat-y image.</b></p>
        <p>Some demo filler text to fill the space.</p>
        <p>Some demo filler text to fill the space.</p>
        <p>Some demo filler text to fill the space.</p>
        <p>Some demo filler text to fill the space.</p>
        <p>Some demo filler text to fill the space.</p>
        <p>Some demo filler text to fill the space.</p>
        <p>Some demo filler text to fill the space.</p>
        <p>Some demo filler text to fill the space.</p>
    </div>
</div>
</body>
</html>

Good demo Ray that shows it clearly in action :slight_smile:

Thanks Paul !

I actually made a couple of modifications to it. The original repeating image I was using was 20px tall and it was a multiple of 500px. The end result was showing the “last reverse repeat” landing exactly at the top. It worked but it kinda defeated the purpose of the demo.

Using background-position with repeat-y

I have replaced the repeating image with an odd sized height of 37px which now shows the “last reverse repeat” as a partial paint. Now it shows the full dynamics of the effect. :wink:

You may have to reload the page to flush your cache and see the new images.

Yes I guess it may have looked as though it started at the top last time :slight_smile: