HTML/CSS/jQuery: background-image opacity

Question

Let's say I have a div, and that div should have a background-image:url(foobar.png). Also, however, foobar.png's opacity should be set to 40% so that the background image is translucent. How can I do this?

If this is not possible without JavaScript, is there an example script I can refer to? Something like this?

jQuery.fn.fadedBgImg = function(url, opacity) {

    // Create block element that fills `this` element

    // Set z-index of said element to lowest

    // Set opacity of said element to 40%

    // Insert said element into parent
}

Does simply creating the image partially opaque work for you? Why does JavaScript need to be used? — KatieK
– KatieK, Commented Dec 22, 2010 at 18:22

Jacob · Accepted Answer · 2010-12-22 18:29:53Z

4

Use CSS to set the opacity:

.translucent {
    opacity: 0.4;
    filter: alpha(opacity = 40); /* For IE */
}

Edit:

Yes, opacity sets the opacity for the entire element, not just the content. To work around this, you can have the content overlay the background and wrap them both in a common parent:

<div id="container">
  <div id="background" class="translucent"></div>
  <div id="content"></div>
</div>

And use CSS like this:

#container {
    position: relative;
    width: 200px;
    height: 200px;
}

#background, #content {
    position: absolute;
    top: 0;
    left: 0;
}

edited Dec 22, 2010 at 18:29

answered Dec 22, 2010 at 17:59

Jacob

79k24 gold badges159 silver badges245 bronze badges

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

1 Comment

AgileMeansDoAsLittleAsPossible Over a year ago

That will change the opacity for the div and its content -- not just the background.

Steve Adams · Accepted Answer · 2010-12-22 17:58:26Z

1

I find this is the easiest method: In your graphics editor, set the transparency on foobar.png to 60% and save it as a 24 bit png file. If you need to serve this document to IE6 and don't want to use a png fix, this isn't a solution.

Otherwise, opacity in web browsers is such an annoying thing to deal with in terms of cross-browser support, and dealing with child elements becoming transparent is a typical issue as I recall.

Unfortunately I don't have any scripts that solve this handy.

edit: I see you edited, and I can tell you're not as unaware of what you're doing as I originally expected. Don't be offended if my advice seems a little elementary, haha.

answered Dec 22, 2010 at 17:58

Steve Adams

2,79224 silver badges29 bronze badges

Comments

Prakash Rao · Accepted Answer · 2016-03-10 06:21:56Z

Try this .. Little changes in the HTML structure .. and instead of using background image use normal image and set it backwards with low opacity.

.my_div{width:300px;height:300px;position:relative;}
.my_div div.back_image{display:block; position:absolute; width: 100%; height:100%;top:0px ; left:0px;opacity:0.8;z-index:1;}
.my_div div.back_image img {width: 100%; height:100%;}
.my_div div.front_text{position:absolute; width: 100%; height:100%;top:0px ; left:0px;opacity:1;z-index:99;padding:10px;color:#ffffff;box-sizing: border-box;}

<div class="my_div">
  <div class="back_image"><img src="https://newevolutiondesigns.com/images/freebies/black-wallpaper-10.jpg"></div>
  <div class="front_text">
  <h2>Testing Title</h2>
  <p>Lorem Ipsum content testing.
  This is Prakash Rao </p>
    </div>
</div>

Rostyslav Dzinko · Accepted Answer · 2012-08-17 13:13:57Z

0

Try changing opacity with css:

opacity:0.4

edited Aug 17, 2012 at 13:13

Rostyslav Dzinko

41k5 gold badges55 silver badges66 bronze badges

answered Dec 22, 2010 at 17:59

XMen

30.3k41 gold badges103 silver badges152 bronze badges

Comments

WBT · Accepted Answer · 2015-08-23 02:20:14Z

While there's no direct support for setting background-image opacity, you can specify multiple background-image values, which are rendered with the first one closest to the viewer.

Thus, if you are for some strange reason unable to simply edit the opacity of the image in an image editor and serve up the modified image, you could try something like:

semitransparent = "images/white50.png"; //a 1x1 pixel image, white at 50% transparency.
myElement.style.backgroundImage = "url('"+semitransparent+"'), url('"+backgroundImage+"')";

This example assumes you're generally rendering over a white page background; you may wish to change the color of the semitransparent image if you're trying to simulate semitransparency with some other color partially bleeding "through."

yogesh chatrola · Accepted Answer · 2016-03-10 05:47:55Z

0

 In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.



img { opacity: 0.4; filter: alpha(opacity=40); //forIE* and earlier

img:hover { opacity: 1.0; filter: alpha(opacity=100); //forIE* and earlier

<img src="klematis.jpg" width="150" height="113" alt="klematis">

<img src="klematis2.jpg" width="150" height="113" alt="klematis">

answered Mar 10, 2016 at 5:47

yogesh chatrola

4314 silver badges12 bronze badges

Collectives™ on Stack Overflow

HTML/CSS/jQuery: background-image opacity

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related