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!