CODEWITHSUNDEEP
cssbackground-image
Pintolus
Pintolus

Reputation: 135

Text is hiding behind background-image

I want to display text in front of the background-image. But it will always hide my text. Code is:

HTML:

<div class="header"> 
<div class="container"> 
  <div class="container-bg">
  </div>
  <div class="container-content">
    <h1>Test Test Test Test Test Test</h1> 
    <p>Test Test Test Test Test Test Test Test Test Test Test Test</p>
  </div>
</div>
</div>

CSS:

h1 {
  font-size: 46px;
  color: #ccc
}
p {
  font-size: 28px;
  color: #ccc
}
.header {
  position: relative;
  padding: 30px 0;
}
.container-bg {
    position: absolute;
    top: 0;
    bottom: -60px;
    right: 0;
    left: 0;
  background-image: 
    linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%),
    url(https://i2.wp.com/www.pro-gamer-gear.de/wp-content/uploads/2014/08/gamer-pc-zusammenstellen.jpg?fit=1170%2C700);
    background-size: cover;
}
.container-content {
  text-align: center;
}

JSFiddle: https://jsfiddle.net/g700q3qc/3/

Please help :)

Upvotes: 0

Views: 10088

Answers (2)

Akash Agrawal
Akash Agrawal

Reputation: 2299

Here you go!!

h1 {
  font-size: 46px;
  color: #ccc
}
p {
  font-size: 28px;
  color: #ccc
}
.header {
  position: relative;
  padding: 30px 0;
}
.container-bg {
	position: absolute;
	top: 0;
	bottom: -60px;
	right: 0;
	left: 0;
  background-image: 
    linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%),
    url(https://i2.wp.com/www.pro-gamer-gear.de/wp-content/uploads/2014/08/gamer-pc-zusammenstellen.jpg?fit=1170%2C700);
    background-size: cover;
}
.container-content {
  text-align: center;
  position: relative;
}
<div class="header"> 
<div class="container"> 
  <div class="container-bg">
  </div>
  <div class="container-content">
    <h1>Test Test Test Test Test Test</h1> 
    <p>Test Test Test Test Test Test Test Test Test Test Test Test</p>
  </div>
</div>
</div>

Upvotes: 1

Felix A J
Felix A J

Reputation: 6470

Add position:relative here - 

.container-content {
  text-align: center;
  position: relative;
}


h1 {
  font-size: 46px;
  color: #ccc
}
p {
  font-size: 28px;
  color: #ccc
}
.header {
  position: relative;
  padding: 30px 0;
}
.container-bg {
position: absolute;
top: 0;
bottom: -60px;
right: 0;
left: 0;
  background-image: 
linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%),
url(https://i2.wp.com/www.pro-gamer-gear.de/wp-content/uploads/2014/08/gamer-pc-zusammenstellen.jpg?fit=1170%2C700);
background-size: cover;
}
.container-content {
  text-align: center;
  position: relative;
}
<div class="header"> 
<div class="container"> 
  <div class="container-bg">
  </div>
  <div class="container-content">
<h1>Test Test Test Test Test Test</h1> 
<p>Test Test Test Test Test Test Test Test Test Test Test Test</p>
  </div>
</div>
</div>

Upvotes: 6

Related Questions