CODEWITHSUNDEEP
htmlcssbackground
Tomer B
Tomer B

Reputation: 5465

CSS/Html: Separate background from divs

I'm trying to build a webpage with two parts, but three backgrounds.

The first part is the page header, with it's own background.

The second part I have a problem with. It's the content part, and it consists of a "top" background, and a "body" background. The top background is a single image, the body background is another image, repeating itself (tiled) to the end of the page.

The problem is that the division between top and body, is only for the background. The content is continous and the same image starts in the top part, and continues down to the body part.

enter image description here

Originally, I tried using:

<div class="header">...</div>
<div class="content-top">...</div> 
<div class="content-body">...</div>

but the problem is that then I couldn't put stuff that will span both the .content-top div and the .content-body div. If I put a larger component in the .content-top div it will push down the .content-body div, including the background, leaving a hole in the middle.

How can this be done?

Edit: Here is a fiddle demonstrating my problem - https://jsfiddle.net/nj13ktms/6/

Upvotes: 0

Views: 1267

Answers (2)

Johannes
Johannes

Reputation: 67748

You can use two backgrounds in the same container:

.content-top {
  text-align: center;
  background: url(http://i.imgur.com/VcvKC2F.jpg) no-repeat center top, url(http://i.imgur.com/FLEHfrY.jpg) repeat-y center;
  background-size: 100% auto;
}

https://jsfiddle.net/x3nqry4x/

(Note: I removed the second DIV and put its contents into the first one)

Upvotes: 1

Dražen
Dražen

Reputation: 293

Use 'background-image'

.section  {
position:relative;
width:100%;
height:100px;
}

.top {
background-image: url("https://www.newton.ac.uk/files/covers/968361.jpg");
}

.middle {
background-image: url("http://random-international.com/wp-content/uploads/2012/10/RR-home-img2.jpg");
}

.bottom {
background-image: url("http://www.chainimage.com/images/random-animals-animals-photo-8676039-fanpop.jpg");
}
<div class="section top"></div>
<div class="section middle"></div>
<div class="section bottom"></div>

Upvotes: 0

Related Questions