4

I'm aware that similar questions have been asked over and over, but I have yet to come across a solution that actually works for me. Picture the following problem.

Situation:

  • The body has a non-fixed background image that repeats both vertically and horizontally.
  • There is supposed to be a second transparent background image laid over the first.

Constraints:

  • The second background is supposed to stretch across the document, just like the background on the body. Mind: Not just the viewport, the entire document.
  • Even when the body height is smaller than the document height (i.e. no scrollbar), the second background must stretch to the bottom of the viewport (so any solution working with 100% html and/or body height is out of the question).
  • The second background's position cannot be fixed, because that would cause some sort of parallax effect when scrolling. The illusion that both images are actually one must be upheld.
  • It is possible for the body to have margin and/or padding. Both backgrounds should cover the entire document regardless.
  • Using a second background image on the body ("background-image: url(), url();") is not an option for backward compatibility reasons.
  • No JavaScript.
  • No actually merging the two images into one, obviously. :)

I have brooded over this problem for a while now and have gotten to the conclusion that this is impossible using only HTML and CSS2. I'd very much like to be proven wrong.

Martin Denk
  • 554
  • 3
  • 14

4 Answers4

2

You should place a background image for two separate which covers each the whole document :

<html>
<head>
<style>
.firstbackground {
 position:absolute;
 left:0;
 top : 0;
 width : 100%;
 min-height : 100%;
 background: url('first.png') repeat;
}
.secondbackground {
 width : 100%;
 min-height : 100%;
 background:url('second.png'); /* may be transparent, but why add a background then ;-) */
}
</style>
</head>
<body>
 <div class="firstbackground">
  <div class="secondbackground">

  long content

  </div>
 </div>


</body>
</html>
Stéphane V
  • 1,094
  • 2
  • 11
  • 25
  • of course second background must be transparent and you can use z-index to make sure it is alway on top – Arif YILMAZ Mar 20 '13 at 13:31
  • This would be a good solution if the body had no margin or padding. The possibility exists however, though I forgot to mention it in the constraints. Added it. Thanks anyway! – Martin Denk Mar 20 '13 at 13:32
  • You can add the needed padding or margin on the
    and leave the padding/margin at zero for the tag. Why do you need margin and padding on the body tag ? This is only default values that you may overwrite
     – Stéphane V Mar 20 '13 at 13:35
  • What do you mean by :"the second background must stretch to the bottom of the viewport" ? If the viewport extends, it is beacuse of the content extending in the
    , so the attached background will follow the div size if the png is big enough... solved (?) The height:100% is only to give a default height to the
    when content is not big enough...
     – Stéphane V Mar 20 '13 at 13:39
  • There is margin or padding on the body because it may be set by another part of the system. It is variable and cannot be influenced, therefore the solution needs to work in any case. – Martin Denk Mar 20 '13 at 13:42
  • The second background having to stretch to the bottom of the viewport is solved by your solution, yep! – Martin Denk Mar 20 '13 at 13:43
  • Edited my answer to use position:absolute to be independant of the margin and padding of the tag. Please try it. Be carefull that I moved the "your content" under the
    tags
     – Stéphane V Mar 20 '13 at 13:44
  • This doesn't work because the backgrounds are not influenced by the document size any longer. The 100% height is always relative to the viewport. If the content is tall enough to create a scrollbar, scrolling down will leave the backgrounds behind. – Martin Denk Mar 20 '13 at 13:51
  • Completely re-wrote the solution and tested it on my computer (Chrome). It is working and height is auto-adapting because I placed the content back in the 2
    . The only thing that is not managed is the margin/padding of the body (0 here). For this you should check if it is possible to place a negative padding on the
    that cancels the padding of the body (:-/ ugly)
     – Stéphane V Mar 20 '13 at 14:07
  • 1
    Your current solution is the best one so far, as it covers all problems except for the padding/margin issue (which is why I have upvoted it but not marked as the accepted answer - I doubt there will be many other people having to tackle problems where body padding/margin are variable). I can't set a negative padding or margin, however, since those values are not known prior to page load. I'd have to use JavaScript, which is not an option unfortunately. Thanks a bunch, though! – Martin Denk Mar 20 '13 at 14:15
0

CSS3 allows multiple backgrounds that are separated by commas, for eg:

background: url('topNonFixedBG.png'), #000 url('mainBG.png') no-repeat fixed top center;
advermark
  • 231
  • 1
  • 10
0

http://jsfiddle.net/hs2WT/1/

Just use multiple divs...

CSS: 

html {
    height: 100%;
}
body { height: 100%;}

.wrapper1 {
    width: 100%;
    height: 100%;
    background: url('http://khill.mhostiuckproductions.com/siteLSSBoilerPlate//images/nav/hixs_pattern_evolution.png');
}

.wrapper2 {
    width: 100%;
    height: 100%;
    background: url('http://khill.mhostiuckproductions.com/siteLSSBoilerPlate//images/nav/yellow1.png');
}

.content { color: #fff; }

HTML: 

<div class="wrapper1">
    <div class="wrapper2">
        <div class="content">
            <p>Some Content</p>
        </div>
    </div>
</div>
Michael
  • 7,016
  • 2
  • 28
  • 41
0

let the secend background to have the position:absolute;

body{
 background:url("http://jsfiddle.net/css/../img/logo.png") #000;
}
#secBg{
 background:url("http://placehold.it/350x150") ;
 position:absolute;
 min-height:500%;
 min-width:100%;

}

<html>
<body>
<div id="secBg">
</div>
</body>
</html>

http://jsfiddle.net/5sxWB/

E P
  • 389
  • 4
  • 16
  • This will stretch the background only to the viewport's bounds. If the page itself goes beyond that, scrolling down will leave the second background behind. – Martin Denk Mar 20 '13 at 13:46
  • oobs! change the min-height to min-height:500%; – E P Mar 20 '13 at 13:54
  • This will either cause the document to be much taller than the content, allowing you to scroll down way beyond it, or - if the content is taller than 500% of the viewport height - the same problem as before. Arbitrarily setting the height doesn't help, unfortunately. :) – Martin Denk Mar 20 '13 at 14:03