CSS Background image opacity affecting the children within it - html

Question

I have tried changing the image opacity in css. But that is affecting all the children inside it. I have looked upon many stackoverflow questions and answers, but still it's not working for me. Hence, decided to ask a question myself.
My sample code :
<div id="home" class="home">
<h2 style="margin-top:130px; text-shadow: #fff 0 0 10px; color:white; font-weight:bold; font-family: 'Gloria Hallelujah', cursive;">Find the suitable tutor you are looking for..</h2><br />
</div>
CSS :
#home {
background: url(../images/home1.png) no-repeat center center fixed;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*opacity: 0.5;*/
}
At first, I tried changing the opacity of the div home, but since it was eating up the text as well, so I decided to change the image opacity manually using GIMP.
I changed it. Even then the text doesn't look to be having the actual color. So I tried making it glow by doing some text-shadow and stuff. Still I don't seem to get the actual text color.
Original Image
This is the actual picture without changing the opacity.
Image with changed opacity in GIMP
This is the image after changing it's opacity in GIMP.
I want the image to have this kind of opacity but the text color of the first image.
Hope I am clear. I uploaded those images here, but since I don't have reputation enough so had to share the links after uploading in another website.

Answer 1

you can use pseudo element for adding background and add opacity to it
html,
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
#home {
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#home:after {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background: url(http://placeimg.com/640/480/any) no-repeat center center fixed;
background-size:100% auto;
opacity: 0.5;
}
<div id="home" class="home">
<h2 style="margin-top:130px; text-shadow: #222 0 0 10px; color:white; font-weight:bold; font-family: 'Gloria Hallelujah', cursive;">Find the suitable tutor you are looking for..</h2>
<br />
</div>

Answer 2

The only way I know of (so far) is to use rgba() as your background-color; this doesn't affect its children (divs or elements).
Example:
rgba(0,0,0,0.5)

Answer 3

Use a div inside a div to serve the background, and make that div only have opacity:
Use background-size:cover; to let the image cover fully. It will abide to the sie of the div.background. So you need to set the div.background to width and height 100%.
http://jsfiddle.net/Preben/0mgrt069/13/
<div id="home" class="home">
<div class="background"></div>
<h2>Find the suitable tutor you are looking for..</h2>
</div>
And CSS:
h2 {
margin-top:130px;
text-shadow: #fff 0 0 10px;
color:black;
font-weight:bold;
font-family: 'Gloria Hallelujah', cursive;
}
.background{
background:url(http://lorempixel.com/400/300/nature/);
background-size:cover;
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: .4;
width: 100%;
height: 100%;
}

Answer 4

I solved it somehow. What I did is I added another div overlay_home
and changed it's rgba in css. That makes the image only change it's opacity without the text.
<div id="home" class="home">
<div id="overlay_home"></div>
<h2 style="margin-top:130px; text-shadow: #fff 0 0 10px; color:white; font-weight:bold; font-family: 'Gloria Hallelujah', cursive;">Find the suitable tutor you are looking for..</h2><br />
</div>
#home {
background: url(../images/home1.png) no-repeat center center fixed;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*opacity: 0.5;*/
}
#overlay_home{
height:100%;
width: 100%;
position: absolute;
background-color: rgba(0,0,0,0.5)
}