CODEWITHSUNDEEP
htmlcss
noway
noway

Reputation: 2585

Two background images one starts where the other ends

I have the following code and want to achieve something like the below demonstrated outline. An image is shown on top of div, and as the user scrolls vertically, the other image is shown repeatedly.

However, I want to show the repeat.png exactly where the stayontop.png ends vertically. How can I achieve this? I tried different background-position:center top, center bottom; variations but no luck.

EDIT: Because the height of background image is in auto mode (background-size:100% auto, 100% auto !important;) Any solution which is based on the static height reference such as background-position:center 50px; unfortunately works fine in one div width, but fails when the user resize the div. (Actually when another user visits the site, with a mobile phone which has different resolution.) Is there anyway to set it dynamically?

!-+-+-+-+-+-+-

stayontop.png

!-+-+-+-+-+-+-

repat.png

!-+-+-+-+-+-+-

repat.png

!-+-+-+-+-+-+-

repat.png

!-+-+-+-+-+-+-

.....

.hede{
    background: url("css/images/stayontop.png"), url("css/images/repeat.png");
    background-repeat:no-repeat, repeat-y;
    background-position:center top, center bottom;
    background-attachment: scroll, scroll;
    background-size:100% auto, 100% auto !important;
    min-height:100%;
}

Upvotes: 2

Views: 972

Answers (4)

Pevara
Pevara

Reputation: 14310

for browser compatibility i would try something in this order: 

   .hede{
        background: url("css/images/repeat.png");
        background-repeat:repeat-y;
        background-position:center top;
        background-size:100% auto;
        min-height:100%;
        margin-top: 20px; // assumed height of stayontop.png
    }
    .hede:before {
        content: url("css/images/stayontop.png");
        height: 20px; 
        margin-top: -20px;
    }

You might have to tweak the code a bit, but it should be possible...

edit: changing the :before css to this might solve the resizing problem:

.hede:before {
  content: url("css/images/stayontop.png");
  height: 20px;
  display: block;
  margin: -20px auto 0; 
}

not entirely sure, but it's worth a try...

Upvotes: 1

gilly3
gilly3

Reputation: 91497

The background position property accepts a length value, besides just top, center, and bottom. So, just specify in pixels where stayontop.png ends:

background-position: center 200px;

Set the background position with JavaScript whenever the window is resized:

http://jsfiddle.net/gilly3/rKD8M/

onresize = resetBackgrounds;
function resetBackgrounds() {
    var els = document.querySelectorAll(".hede");
    for (var i = 0; i < els.length; i++) {
        var h = els[i].clientWidth * aspectRatio;  // must define aspectRatio
        els[i].style.backgroundPosition = "center top, center " + h + "px";
    }
}

Upvotes: 1

Alexander Wigmore
Alexander Wigmore

Reputation: 3186

The answers above will probably be the best solution, but just throwing another quick idea in. http://jsfiddle.net/wigster/8FMB7/1/ I wouldn't use it in exactly this form, but you get the idea, by position the 2 backgrounds top and bottom it will created the desired split.

Upvotes: 1

Mike Brant
Mike Brant

Reputation: 71384

I would think you would just need to make sure that the height of the stayontop image is the same as that of the repeated image (or 2x, 3x, 4x the height) and have both aligned to top.

You also need to make sure the browsers going to you site support multiple background images.

For cross-browser compliance you are probably better off using two HTML elements.

Upvotes: 1

Related Questions