Background Image Covering Text On Page
Background image is covering the text on page. Any help would be appreciated. On the home page I have:
Solution 1:
You can use z-index: -1
to your #bg
element
#bg {
position: fixed;
top: 1em;
right: 30%;
bottom: 0;
left: 30%;
margin: 0 -600px;
background-size: cover;
z-index: -1;
}
<div id="bg">
<img src="http://placehold.it/600x150" width="100%" height="200%" alt="">
</div>
<h1> Welcome to the home page </h1>
Solution 2:
Just apply z-index
for elements:
#bg {
position: fixed;
top: 1em;
right: 30%;
bottom: 0;
left: 30%;
margin: 0 -600px;
background-size: cover;
z-index: 1;
}
h1 {
z-index: 5;
position: relative;
}
<div id="bg">
<img src="http://placehold.it/600x150" width="100%" height="200%" alt="">
</div>
<h1> Welcome to the home page </h1>
Solution 3:
Try setting the image as a background on the div
like so:
#bg {
background-image: url('http://placehold.it/600x150');
}
Of course you should remove the img
from inside the div
.
Solution 4:
bg {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This would help as CSS trick.
Solution 5:
The recommended solution for this would be the use of a z-index
property.
Add it to your CSS-code and make sure it's a negative value, so it gets behind everything by default. So for your #bg
id it would go like:
#bg {
z-index: -999;
}
This should do the trick!
Post a Comment for "Background Image Covering Text On Page"