How do I make a background image transparent in CSS? - html

Question

<style>
header {
text-align: center;
background-image: url('http://i.imgur.com/7L79iny.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
This is the code I'm using to add a background image to my header. How to I make the image semi-transparent without making the rest of the header transparent.
<header>
<center><img src="http://i.imgur.com/EPd7PBU.jpg" height=350 title="source: imgur.com" /></center>
<h1>Taylor's Blog</h1>
<ul>
<li>About Me</li>
<li>Blogs</li>
<li>Contact Me</li>
</ul>
</header>

Answer 1

You cannot change the opacity of a background image with css, only the opacity of an element. However, there is a very easy work-around, that only requires css:
header {
text-align: center;
position:relative;
}
header:after{
content:'';
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background-image: url('http://i.imgur.com/7L79iny.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
opacity:0.5;
}
<header>
<img src="http://i.imgur.com/EPd7PBU.jpg" height=350 title="source: imgur.com" />
<h1>Taylor's Blog</h1>
<ul>
<li>About Me</li>
<li>Blogs</li>
<li>Contact Me</li>
</ul>
</header>
On another note, <center> is depreciated, and should not be used. In fact, in the case of the html you have, the link and image are already centered with text-align:center;, making the center tag useless.

Answer 2

The best way would be to create an absolutely positioned div that is transparent and is layered under the content.
<style>
header {
position: relative;
}
header .background {
position: absolute;
width: 100%;
height:100;
opacity: .5;
background-image: url('http://i.imgur.com/7L79iny.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
</style>
sadsad
<header>
<div class="background"></div>
<center><img src="http://i.imgur.com/EPd7PBU.jpg" height=350 title="source: imgur.com" /></center>
<h1>Taylor's Blog</h1>
<ul>
<li>About Me</li>
<li>Blogs</li>
<li>Contact Me</li>
</ul>
</header>