Geek Answers Handbook

Place one full-screen background image on top of another

I know that such questions have been asked over and over, but I still have to find a solution that really works for me. Imagine the following problem.

Situation:

  • The body has an unfixed background image that repeats both vertically and horizontally.
  • It is assumed that the second transparent background image is laid over the first.

Limitations:

  • The second background should stretch across the entire document, just like the background on the body. Reason: not only the viewing window, the entire document.
  • Even when the body height is less than the height of the document (i.e. the scroll bar), the second background should stretch to the bottom of the viewport (so that any solution working with 100% html and / or body growth is out of the question).
  • The second position of the background cannot be fixed, because it can cause some kind of parallax effect when scrolling. The illusion that both images actually need to be supported.
  • It is possible that the body has an edge and / or complement. Both backgrounds should cover the entire document independently.
  • Using a second background image on the body (" background-image: url(), url(); ") is not an option for backward compatibility reasons.
  • No javascript.
  • No, in fact, merging two images into one, obviously. :)

I’ve been thinking about this issue for some time and came to the conclusion that this is not possible using only HTML and CSS2. I would really like to be proved wrong.

+4
source share
4 answers

You must put a background image for two separate ones that spans each 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>
+2
source

CSS3 allows you to use multiple comma-separated backgrounds, for example:

 background: url('topNonFixedBG.png'), #000 url('mainBG.png') no-repeat fixed top center;
0
source

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>
0
source

so that the original background has 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/

0
source

More articles:


All Articles