-1

I am using bootstrap along with HTML5 to develop a website. I have a website header. I wish to have an image in the website header with some opacity value and also some text in it. I have referred this link setting opacity for background image and tried implementing it. I have got the text but not the image.

Here is the code:

HTML:

<div class="page-header head">
<div class="hbg"></div>
Hi there
</div>

CSS:

.head{
position: relative;
z-index: 1;
margin-top:10px;
height: 170px;
}

.head .hbg
{
background: url('hbg.png');
background-size: 100% 100%;
opacity: 0.3;
z-index: -1;
}

What is the issue here?

Community
  • 1
  • 1
xxx
  • 179
  • 2
  • 12

3 Answers3

3

.head .bg doesnt exist in the code above. Change to .hbg.

saZmer
  • 118
  • 1
  • 8
1

How about this instead?

<div class="page-header head">
Hi there
</div>

-

.head{
  width: 300px;
  height: 250px;
  display: block;
  position: relative;
}

.head::after {
  content: "";
  background: url(hbg.png);
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}
T.J. Wallace
  • 154
  • 1
  • 1
  • 13
0

You need to add position: absolute; top: 0; left: 0; to .hbg and width and height of 100% so it spreads all over the parent container:)

.head {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  height: 170px;
}
.head .hbg {
  position: absolute;
  top: 0px;
  left: 0px;
  background: url('http://gillespaquette.ca/images/stack-icon.png');
  background-size: cover;
  opacity: 0.3;
  z-index: -1;
  width: 100%;
  height: 100%;
}
<div class="page-header head">
  <div class="hbg"></div>
  Hi there
</div>
Bojan Petkovski
  • 6,835
  • 1
  • 25
  • 34
  • what is the purpose of width and height here? If I remove it, the image disappears. Why? – xxx Oct 17 '14 at 15:53
  • You need to add width and height on .hbg so it can fill it's parent container. The image is just a background of .hbg and plays no role in the width and height, it will spread to how big is the element that it is added as background :) – Bojan Petkovski Oct 17 '14 at 15:57