Grow your CSS skills. Land your dream job.

Last updated on:

Transparent Background Images

There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Reference URL

Comments

  1. Why not use

    top: 0; bottom: 0; left: 0; right: 0;

    instead of fixed width and height?

    • Permalink to comment#

      Or as long as the position is absolute :), just use :

      width : 100%
      height: 100%
      
    • Rose
      Permalink to comment#

      What if you don’t want it to be completely transparent .. how can/do you do that?

  2. Permalink to comment#

    What is the browser support for this snippet?

    • NONAME
      Permalink to comment#

      Known support: Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 9+

  3. Permalink to comment#

    I use
    filter: alpha(Opacity=90);
    opacity: 0.9;

  4. Nice!
    Thanks for your trick and for this star here in comment box :D.

  5. Permalink to comment#

    Any hack to work it with IE 7 and 8?

  6. Permalink to comment#

    This works great, but I’m not able to select/click the text in the ‘top’ div. Anyone found a fix for that?

    • Allan
      Permalink to comment#

      You are not able to click inside most probably because you have more than one div inside. The solution to use classes with you div; See code below

      div.transparentBox {
      width: 500px;
      height: 350px;
      display: block;
      position: fixed;
      top: 30%;
      left: 30%;
      

      }

      div.transparentBox::after {
      content: “”;
      background-color: #ffffff;
      opacity: 0.5;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: -1;
      }

  7. mary
    Permalink to comment#

    how do you change the opacity of the background image only? trying this made everything but the background image change opacity..

  8. Permalink to comment#

    nice tricks, this help me :)

  9. Permalink to comment#

    Mother of god. This is perfect. I could not find a way to apply a background with opacity (which would fit its parent perfectly and not display over content), and thought I’d have to add a presentation div. This is one of the sickest tricks I’ve seen this year. I can expect mure more from my future website visually, thanks to you. Really, thanks, thanks, thanks, thank you so much.

  10. babyice
    Permalink to comment#

    This is the css codes to make the image background transparent!
    TRY IT…! :)

    background: rgb(255, 255, 255) transparent ;
    background: rgba(255, 255, 255, 0.8) ;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF) ;
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)” ;

    *Only supported by IE

  11. Bart
    Permalink to comment#

    Why use code for background-image opacity?

    The easiest way is exporting your .PNG allready with the right transparancy. That way you don’t need to code opacity. And it will be supported by all browsers including IE6 (if using png fix).

    • ian.pvd
      Permalink to comment#

      How do I change the opacity on mouseover? Without loading a new image or using a sprite.

      Or,
      How do I set the opacity to some arbitrary percentage on the front end?

    • Jt

      Main reason I’d imagine would be to save download time. Semi-transparent PNGs in particular are quite heavy. I am looking at a 10k JPG vs a 100k PNG.

    • Erica Fisher
      Permalink to comment#

      I’ll be using it to make text more readable when its layout changes at a responsive breakpoint, causing it to overlap the background image.

  12. Cameron
    Permalink to comment#

    When I do this trick on the over the body element (so I can get a transparent color overlaying the background), it only displays the :after element in the initial view port frame. When I scroll down, it disappears. Any ideas around that?

    JSFiddle here illustrating the problem:

    http://jsfiddle.net/ccnokes/sqnKb/

    Cool trick though.

    • Cameron, you can set your position from “absolute” to “fixed”. It should fix your problem.

      JSFiddle here fix the problem:

      http://jsfiddle.net/sqnKb/20/

    • RjBradlow
      Permalink to comment#

      Solutions to Cameron’s conundrum:

      Cantidio Fontes’ solution works great.

      In following with this articles instructions:
      display: block and position were omitted from the parent, adding them works as expected too.

      body {background:#DDD; padding:2em;
          display: block;
          position: relative;
      }
      
  13. Hi, how could I reduce the background image opacity inside the textbox? I’ve got a username textbox within a user logo and want to reduce its opacity without effecting the textbox. Thanks before hand.

  14. Sneha

    Hello,
    How could I make the background image transparent other than using background : transparent or background : none

    • Sly
      Permalink to comment#

      Try this with different opacity value to see this.

      div.background
      {
      background:url(tree.gif);
      background-size:100% 100%;
      background-color:#ffffff;
      opacity:.8;
      background-repeat:no-repeat;
      }
      div.box
      {
      background:url(flwr.gif);
      background-size:100% 100%;
      background-color:#ffffff;
      opacity:0.7;
      background-repeat:no-repeat;
      }
      }

      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.

      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.

      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.

      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.

    • Sly
      Permalink to comment#

      div.background
      {
      background:url(img_tree.gif);
      background-size:100% 100%;
      background-color:#ffffff;
      opacity:.8;
      background-repeat:no-repeat;
      }
      div.box
      {
      background:url(img_flwr.gif);
      background-size:100% 100%;
      background-color:#ffffff;
      opacity:0.7;
      background-repeat:no-repeat;
      }
      }

      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.
      This is some text that is placed in the transparent box.

  15. Mon
    Permalink to comment#

    Instead of using an actual image, use rgba(255, 255, 255, 0.5) instead – combined with a technique from my coworker. Works like a charm.

  16. RjBradlow
    Permalink to comment#

    I had to change the z-index from -1 to 1 for the shader layer to show up. (photoshop & gimp mentality)
    The page is dark with a div background image and color that are white…
    I didn’t want a contrasting color to show the actual image size and the whole div was way too bright!
    So a little tint over the top cut down on the glare making everything nice and readable again.

    Thank you for this; I was scratching my head trying to keep the content from dropping out too.
    Sorry for the length, here’s my example in case others are having trouble with the stacking order too:

    div.titlebox    {
        background-image:url('CovercopyBG2.jpg');
        background-repeat: no-repeat;
        background-position:center; 
        background-color: #fff;
        max-width: 840px;
        margin: 0px auto;
        padding: 20px;
        border: solid 2px #5CACEE;
        border-radius: 20px;
        display: block;
        position: relative;
    
    }
    div.titlebox:after  {
        content: "";
        background-color: #000;
        opacity: .1;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: 1;
    }
    
  17. RjBradlow
    Permalink to comment#

    I know it’s an old question but for anyone else who may want to know the answer to ivan.pvd’s question:

    .your-class-id    { opacity: .5;  }
    .your-class-id:hover    { opacity 1.0;  }
    

    Just add :hover for mouseover changes to opacity or any style; color, shadow, backgrounds, etc…

  18. ashwin
    Permalink to comment#

    Thanks for this helpful trick :)

  19. nutsack
    Permalink to comment#

    Childish attempt to create something useful but winding up to be useless.

  20. Permalink to comment#

    I had to dynamically generate the background images on the client side so i wanted to apply a class via jQuery so they would look transparent without the complexity to implement. So I used an inset box-shadow to achieve the same effect (even has a nice vignette look, but can be flat transparent if you adjust the spread enough):

    box-shadow:inset 0 0 600px 75px rgba(0,0,0,1);
    
  21. Brad Dalton
    Permalink to comment#

    How about for archive post thumbnails that are different widths?

    How would you make sure a background color with opacity always displays full with of the image and not the entry title or entry header if you wanted the titles to display over the image?

    This is what i have but it doesn’t control the width of the background color on different sizes post thumbnails

        .archive  .entry-header .entry-title {
            background: rgba(55, 85, 25, 0.3);
        position: absolute;
        display: block;
            text-align: center;
        font-size: 20px;
        padding: 20px 10px;
    }
  22. SomeGuy
    Permalink to comment#

    Seriously? 100kb png is what you call “heavy”? Maybe, compared to a 10kb jpg, but really, unless you’re downloading a million of them on one page, we have some pretty high speed internet these days. Unless you’re getting into megs, I wouldn’t worry about 10kb vs 100kb images. If you’re that worried about file size, use colors instead of images. It just sounds kind of petty to me, but whatever.

  23. Jt
    Permalink to comment#

    Some guy, that comment smacks of absolute amateurism. Not caring about freaking 90 Kbps? That is absolutely huge for an image of the size we’re talking. Take it and multiply by hundreds of potential images throughout the site, and multiply that by all the bandwidth you’re throwing in the toilet if you have any real viewership. There are still a few people on 56k and a ton of people on EDGE or 3G connections. Just because you have high speed internet at all times doesn’t mean everyone else does, and it doesn’t make your bandwidth free either. Developers like you disgust me. You care nothing for user experience, you should find another field.

  24. Guys thank you very much for that piece of VERY handy code. Anyway I got it improved and wanted to return the favor.

    I got a situation where I am dealing with dynamic “height” / “width” of the initial div so I am unable to set height / width of the :after selector (except with JS but that is too much work for lazy like me).
    So I played around a little and came up with a pure CSS solution that does not care about height / width / padding or margin.

    I hope I helped :)

    http://jsfiddle.net/4CvZv/

  25. Vinaya Kohli
    Permalink to comment#

    well i am new to css. I will be really thankful if you could answer my queries.

    I am having trouble understanding different values of “display” and “position”.
    what difference each value make and when to use which one.

    Thanks in advance

  26. How to use it in uploading logo in your WordPress blog?

  27. David John
    Permalink to comment#

    Excellent Bro. Good Example for background image opacity…

    Thanks

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".