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
Post a Comment