Skip to content Skip to sidebar Skip to footer

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"