Hello All,
Is it possible that a background image could be opaque but the text on it remain normal?
the problem is like…
i have a background picture on body. then on it, i have an another div which contains data. for this div, i want to fox a colour or image but that should be opaque. On the same time the text on it should not be effected by opacity.
This was a Sitepoint CSS quiz.
http://codefundamentals.com/demos/CSS-quiz-20.php
The problem is that opacity automatically goes to all children - so if you look at the example, we make sure the content is not inside the parent with the background image.
You need to remove the image on the BODY probably and use a a DIV to hold the image…just look at the example.
If you just want a partially opaque background color only then you can use rgba for IE9+.
e.g.
background:rgba(0,0,0,0.3);
The first three values set the rgb color (black in this case) and the last value sets the opacity between 0 - 1.
If you want a transparent background image then as Ryan mentioned you would need the image to be in a separate (non nested) element so that it doesn’t affect the text as opacity affect the whole div and children. (Or you could just use make a transparent image in your paint package.)
My problem is somewhat like example…
The middle div in example hav a pic,n then data below it. I need that pic to be bacjgroibd with opacity.
You have an example? Could we see it please? We can point you in the right direction.
As said, it isn’t really clear what you are asking. Set up a demo for us on CodePen or your own site so we can see what you are doing.
You can make an image semi transparent via Photoshop if you want.
here is the link…http://www.buddiescolumn.co.in/demo.php
I dont want to use photoshop… i am already running late by one month of launching my site and still there are lot of thing to be fixed, 30% in css only. 
Here is alot on which i need help of you all.
Why? It’s the easiest option, and will save you the time you are currently wasting. Other than that, the answer you need was given above by Ryan and Paul. You’ll need to separate the div with the image from the div with text and place one over the other.
Your example would be extremely easy to convert to mine.
http://codefundamentals.com/demos/CSS-quiz-20.php
I linked that above.
You could literally copy paste my exmaple, replace image file paths, and change the text and you’d be good to go.
because i dont know hot to use it… you might be finding it strange but its true.
how to overlap to divs?
I am good in php but as far as css is concerned, i know very little.
I will explain my example. The #outer has position:relative which is useful and overflow:hidden (along with width set and some other properties. Next, inside that element, we have .content and .opaque. The .content element literally just holds all the text. Nothing else. Just straight up text.
Now the .opaque element is position:absolute, which means you can place it anywhere and it will be relative to the nearest positioned element (in this example #outer since if you remember, we set position:relative on it). So .opaque has top:0;left:0; and encompasses the entire #outer element with height:999em. This height doesn’t matter since the overflow:hidden on #outer will prevent any bad things from happening. This .opaque element has the opacity on it which gives the opacity look yet since the content IS NOT a child of .opaque, it doesn’t inherit the opacity feature. Does this make sense?
Why not ask about that then. 
Do you have Photoshop? If so, it would take about 5 seconds to make the image semitransparent. Bam. Done. And it would work much better than the CSS hack.
I’m sure other image editors could do it too if you don’t have Photoshop.
[quote=“ralphm, post:12, topic:98614”]
And it would work much better than the CSS hack.
[/quote]I take offense to that! . This is elegant and it’s super neat. Whoever originally made this example up is crafty.
Theory part is good and i will try the practical now…
One more question… what for index z is used?
I will download it and then came back to you…
When i started working on my website, first i decided to draw my header on photoshop but i was not clear how it will behave on different screen width because i think in photo shop we have to provide fixed width and height.
Even , i dont know its answer till date.
The example you posted works fine. If you just give some transparency to the image, nothing else will change except that you’ll have your opacity.
Ryan’s solution does work really well, but is a bit more complex—which might be asking for trouble on some devices, but it looks like it’s been pretty well tested, from what I can see.
z-index is used for positioned elements (position:fixed/absolute/relative) and it determines the stacking order for those elements. Whatever element has a higher z-index will be placed on top of lower/null z-index. There are some exceptions to this but take that as a rule of thumb.
You can do it without extra divs for IE8+ by adding these extra rules:
.box1 {
opacity:1.0;
background:none;
position:relative;
}
.box1:after {
content:" ";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url(http://www.buddiescolumn.co.in/image1.jpg) no-repeat 50% 50%;
z-index:-1;
background-size:cover;
opacity:0.4;
}
I should probably go through all the demos and modernize them for today - I think your CSS quizzes had us work specifically with IE6-7 sometimes and I bet most demos on my site could probably be modernized. Thanks for this section Paul.
Yes, a few years ago we still had to cater for those awkward browsers but these days most just support IE8+ (or at least don’t add the fancy stuff for older browsers).
It’s quite nice not to have to support ie6 with everything 