Float vertical background-image under another background-image_问答_开发者

Float vertical background-image under another background-image

开发者 https://www.devze.com 2023-02-19 05:12 出处：网络

Image explanation: http://img219.imageshack.us/f/skrmavbild20110321kl160.png/ I have a background-image that I want on the top of my page, this image is width 800px and height 400px.

Image explanation: http://img219.imageshack.us/f/skrmavbild20110321kl160.png/

I have a background-image that I want on the top of my page, this image is width 800px and height 400px.

Under this image I want another background-image which will repeat vertical (repeat-y) for the rest of the page.

I have tried the following

<div id="bg-st开发者_开发问答atic">
 <div id="bg-repeat-y">
  <div>
   Text goes here
  </div>
 </div>
</div>

The thing is that I want "The text goes here" to float over both element. (See picture, http://img219.imageshack.us/f/skrmavbild20110321kl160.png/)

What should I do to do this?

You are making this seem too complicated, but it's extremely easy. This is what you need to do:

Your "infinite, repeated" image will go as a site background, like this:

body{ background: url("your-repeated-image.png"); }

Next, create a html like this:

<body>
   <div id="container">
      any content, text, whatever goes here
   </div>
</body>

And just put your 800x400px image there like this:

#container{ width: 800px; background: url("your-top-image.png") no-repeat; }

While testing it, temporarily use this:

#container{ height: 600px; } /* erase after the content is ready */

I think the solution would be the other way around: have the repeating background on the outside div and the fixed height background on the inside div.

Some code on jsfiddle: http://jsfiddle.net/EBK4C/