CODEWITHSUNDEEP
javascripthtmlcssopacity
AgileMeansDoAsLittleAsPossible
AgileMeansDoAsLittleAsPossible

Reputation: 3617

HTML/CSS/jQuery: background-image opacity

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
}

Upvotes: 4

Views: 14118

Answers (6)

Prakash Rao
Prakash Rao

Reputation: 2398

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>

Upvotes: 1

yogesh chatrola
yogesh chatrola

Reputation: 431

 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">

Upvotes: 0

WBT
WBT

Reputation: 2465

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."

Upvotes: 0

XMen
XMen

Reputation: 30238

Try changing opacity with css:

opacity:0.4

Upvotes: 0

Jacob
Jacob

Reputation: 78850

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

Upvotes: 4

Steve Adams
Steve Adams

Reputation: 2837

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.

Upvotes: 1

Related Questions