Cover a body background by another image

Question

I'm trying to cover up a html body background image by another image. I used z-index but can't get it working. Am I missing something or just can't understand what I'm doing.

See sample code below:

 body, html { margin: 0; /* The image used */ background-image: url('http://lorempixel.com/output/nature-qc-1176-907-10.jpg'); /* Full height */ height: 100%; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } #main-content { background-image: url('http://lorempixel.com/output/food-qc-640-633-1.jpg'); z-index: 10; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; position: relative; } .content { /*height: 700px;*/ height: 100vh; background:rgba(255,255,255,0.5); /*margin-top: 20%;*/ } 

 <div id="main-content"> <div class="content">something in here..</div> <div class="content">something in here..</div> <div class="content">something in here..</div> </div> 

Additionaly, inside the main-content are divs with 100vh and background opacity

Main content images should be on top of everything including the content div with background opacity.

Answer 1

Use 100% width and height on #main-content , like:

#main-content {
  width: 100%;
  height: 100%;
}

Have a look at the snippet below:

 body, html { margin: 0; /* The image used */ background-image: url('http://lorempixel.com/output/nature-qc-1176-907-10.jpg'); /* Full height */ height: 100%; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } #main-content { background-image: url('http://placehold.it/500x500'); z-index: 10; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; position: relative; width: 100%; height: 100%; } 

 <div id="main-content"></div> 

Hope this helps!

Answer 2

It will work if you define a height for the div with CSS. Or insert content so it will expand vertically.

A background image makes sense for an element that contains more content, otherwise you can insert the image with <img>

Answer 3

You mean something as below, if so then set #main-content height:auto and it works fine, if you set height:100% then it takes that as 100vh , which on scroll hides image placed at top, so try as below.

So now #main-content height:auto calculates and takes height assigned to child elements present inside it and the background image which is assigned to this div #main-content can be seen only till height of 100vh, after that the default image that is assigned to body get visible.

 body, html { margin: 0; background-image: url('http://lorempixel.com/output/nature-qc-1176-907-10.jpg'); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } #main-content { background-image: url('http://placehold.it/500x500'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; width:100%; height:auto; } .content { height: 100vh; background:rgba(220,60,60,0.6); color:#fff; } 

 <div id="main-content"> <div id="main-content"> <div class="content">something in here..</div> <div class="content">something in here..</div> <div class="content">something in here..</div> </div> </div>