html5 - setting opacity for background image with url in css -


I am using Bootstrap with HTML5 to develop a website. I have a website header, I want to put an image in the top header of the website with some ambiguity value and some text in it also I have referred to this link and tried to apply it. I got the text but the image is not.

Here's the code:

HTML:

  & lt; Div class = "page header header" & gt; & Lt; Div class = "hbg" & gt; & Lt; / Div & gt; Hello there & lt; / Div & gt;  

CSS:

  .head {location: relative; Z-index: 1; Margin Top: 10px; Height: 170px; } .head.hbg {background: url ('hbg.png'); Background-shaped: 100% 100%; Opacity: 0.3; Z-index: -1; }  

What's the problem here?

Add you status: absolute; Top: 0; Left: 0; HBG and width and reach a height of 100%, so it spreads in all original containers :)

  .head {location: relative; Z-index: 1; Margin-top: 10px; Height: 170px; } .head .hbg {status: absolute; Top: 0 pixels; Left: 0 pixels; Background: URL ('http://gillespaquette.ca/images/stack-icon.png'); Background size: cover; Opacity: 0.3; Z-index: -1; Width: 100%; Height: 100%; }  
  & lt; Div class = "page-header" & gt; & Lt; Div class = "hbg" & gt; & Lt; / Div & gt; Hello there & lt; / Div & gt;  


Comments

Popular posts from this blog

winforms - C# Form - Property Change -

javascript - amcharts makechart not working -

java - Algorithm negotiation fail SSH in Jenkins -