Add ‘z-index’ to your CSS. Thats a way to define which div to be on top of the other.
Solution 1 :
Solution 2 :
So mate, what you’ve got to do is:
- add CSS to the container class, add position relative to the container class
.container{
position: relative;
}
- in .bg:before css update the position fixed to relative, and ensure that margin from top is 0px
.bg:before {
position:absolute;
content:"";
z-index:1;
width: 50%;
height: 100%;
top:0px;
right: 0;
transition:1s all;
opacity:0;
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
}
.bg1:before{opacity:1;} /*to make the first image display at first*/
Problem :
Just working on a little bit of code for a personal project and for some reason the background image(s) keep overlapping my header and other divs. Dropped in a dummy header to show, but the image should obviously be contained within the div and I can’t seem to get it right! Would really appreciate any advice on how to keep this contained within.
Also, on a sidenote I’d like the first image showing before hover, but the containing of the image is even more frustrating right now. I’ve used the below to make the image fit, so perhaps something to do with that?
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
Comments
Comment posted by Mat
Your
Comment posted by daniel.b
That works for the header! Thank you so much. Would you happen to know why it would still overlap the footer though/divs below?
Comment posted by jsfiddle.net/8nxksu6m
@Mat Added a footer here to show where it’s still overlapping!
Comment posted by Mat
I don’t see the footer in jsfiddle, but it depends how you position your footer. If you put it as a next div (after container) it can’t overlap, I just checked it. If you do it absolute or fixed you have to play with z-index as again it’s out of the normal flow. Try to send the fiddle again as I can’t see exactly what you have
Comment posted by daniel.b
Thanks Nishkarash! This works perfectly. Can you possible let me know how to have the first image showing before you hover too?
Comment posted by Nishkarsh Dubb
yes sure, so at the end of the CSS (the absolute end okay), add