CODEWITHSUNDEEP
htmlcss
claudios
claudios

Reputation: 6666

Cover a body background by another image

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-q-c-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-q-c-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.

Upvotes: 2

Views: 67

Answers (3)

frnt
frnt

Reputation: 8795

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-q-c-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>

Upvotes: 1

Johann Kratzik
Johann Kratzik

Reputation: 794

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>

Upvotes: 1

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

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-q-c-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!

Upvotes: 1

Related Questions