0

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.

Improve this question

4 Answers 4

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

the text still looks blur and the image size isn't the fullpage anymore.
check the edit ? changed the text shadow color to #222
1

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)

Improve this answer

1 Comment

i have a background image.. how to rgba an image?
0

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%; }

enter image description here

Improve this answer

Comments

0

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) }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.