Opacity for background images

Question

karthik_ppts 81 Posting Pro

14 Years Ago

Hi Frendz,
How to set opacity for background images?

graphics:image html-css user-interface

4 Contributors
13 Replies
533 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by Dandello

Dani AI

Generated 10 Months Ago

had the right intuition: setting opacity on the container will fade everything inside it (text, images, etc.). As pointed out, opacity is inherited for the element and its children, so you need a way to fade only the background layer while leaving the content at full opacity.

A clean, modern solution that works with auto-height containers is to put the background image on a pseudo-element and layer your content above it. The pseudo-element is absolutely positioned to cover the parent but does not affect layout height, so it adapts to the content:

<div class="panel">
  <div class="content">…your text and controls…</div>
</div>

.panel { position: relative; /* no fixed height needed */ }

.panel::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: url("forest.jpg") center/cover no-repeat;
  opacity: 0.35;           /* background opacity only */
  pointer-events: none;   /* lets content receive clicks */
  z-index: 0;
}

.panel > .content {
  position: relative;
  z-index: 1;              /* sits above the faded background */
}

If you prefer not to use pseudo-elements, a second option is stacking a semi-transparent gradient over the image in the background property (modern browsers):

.panel {
  background:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    url("forest.jpg") center/cover no-repeat;
}

Notes and troubleshooting: give the parent position: relative so the pseudo-element sizes correctly; ensure the content has a higher z-index; avoid negative z-index pitfalls or transforms that create new stacking contexts; use pointer-events:none on the overlay if clicks are blocked. For very old IE (pre-IE9) you’ll need a fallback — a pre-edited semi-transparent PNG or an IE-specific rule — which is what and were suggesting.

All 13 Replies

Dandello 8 Posting Whiz in Training

14 Years Ago

Try wrapping the foreground images and text in a tag that will allow you to set opacity and alpha independent of the background.

ushajase 11 Newbie Poster

14 Years Ago

hi,
try this,

<div style="position:absolute; top:10px; z-index:100;left:10px;height:500px; width:500px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

Edited 14 Years Ago by ushajase because: n/a

karthik_ppts commented: Useful post +6

ushajase 11 Newbie Poster

14 Years Ago

oho k.

ushajase 11 Newbie Poster

14 Years Ago

what type of background image have you used for that? is it repeated image?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

karthik_ppts 81 Posting Pro · Answer 1 · 2011-09-23T10:55:47+00:00

I tried this but foreground text also got the opacity property. But i needonly in the background images.

td{
	background-image:url(forest.jpg);
	filter:alpha(opacity=20);
	height:100%;
	opacity:.90;
}

karthik_ppts 81 Posting Pro · Answer 2 · 2011-09-24T10:02:17+00:00

Try wrapping the foreground images and text in a tag that will allow you to set opacity and alpha independent of the background.

Tried that too. Its not working

<td style="background-image:url(images/report_events.png); background-repeat:no-repeat; background-position:center;filter:alpha(opacity=20);opacity:0.2;">
                    	<div>
                            -----------
                            -----------
                            -----------
                    	</div>
                    </td>

karthik_ppts 81 Posting Pro · Answer 3 · 2011-09-24T17:05:05+00:00

hi,
try this,
<div style="position:relative; ">
<div style=" background-image:url(kitchen/gibbsandsoelleb47_rgb.jpg); opacity:0.5;
filter:alpha(opacity=40);height:520px; width:520px;">
</div>
<div style="position:absolute; top:10px; z-index:100;left:10px;height:500px; width:500px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

thanks for your valuable reply. But this code only works for fixed height divs. My div is auto height. What i do for that?

karthik_ppts 81 Posting Pro · Answer 4 · 2011-09-24T17:05:58+00:00

hi,
try this,
<div style="position:relative; ">
<div style=" background-image:url(kitchen/gibbsandsoelleb47_rgb.jpg); opacity:0.5;
filter:alpha(opacity=40);height:520px; width:520px;">
</div>
<div style="position:absolute; top:10px; z-index:100;left:10px;height:500px; width:500px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

Post your code with code tags.....

karthik_ppts 81 Posting Pro · Answer 5 · 2011-09-24T18:19:23+00:00

what type of background image have you used for that? is it repeated image?

No... Its just an single image(png).

ushajase 11 Newbie Poster · Answer 6 · 2011-09-24T19:03:39+00:00

No... Its just an single image(png).

karthik,
you can reduce the opacity of image in Photoshop and save .png format.then no need to
reduce image opacity in CSS.it will be transparent.
if you use this method, you have to set height. otherwise you can use java script. i don't know exact code of java i got, i'll tell you.

karthik_ppts 81 Posting Pro · Answer 7 · 2011-09-24T19:28:54+00:00

karthik,
you can reduce the opacity of image in Photoshop and save .png format.then no need to
reduce image opacity in CSS.it will be transparent.
if you use this method, you have to set height. otherwise you can use java script. i don't know exact code of java i got, i'll tell you.

Ok.. i'll try

Edge330 0 Newbie Poster · Answer 8 · 2011-09-24T19:58:28+00:00

Edge330 0 Newbie Poster

14 Years Ago

Use PS to set opacity and save file in png format

Dandello 8 Posting Whiz in Training · Answer 9 · 2011-09-24T20:10:35+00:00

Just checked my books - opacity is inherited. Period.
The recommendation is to set the alpha transparency in your png file, then use a behavior work around for MSIE. As in

behavior: url(iepngfic.htc);

This involves getting a copy of the 'iepngfix.htc' file but a web search should find it for you.

Opacity for background images

Dani AI

Recommended Answers Collapse Answers

All 13 Replies

Recommended Answers