1

Is it possible to keep a background image 100% opacity and make the background-colour 50% opacity?

.smallIcons{
    background-color: #f00;
    opacity: 0.5; // 50% background
    background-image: url(../twiter.png); // 100% here
    background-repeat: no-repeat;
}
Becky
  • 5,467
  • 9
  • 40
  • 73
  • You basically want an opaque, colored overlay? – Nix May 22 '15 at 13:24
  • @Nix: thanks. Not sure if I'm looking for a overlay effect. But I need the background-colour (50%) on the back and the png infront (100%) – Becky May 22 '15 at 13:26
  • Based on your title, the code should work. Perhaps you could make a demo and show us why it isn't. – Paulie_D May 22 '15 at 13:27
  • 1
    This seems really close to http://stackoverflow.com/questions/9182978/semi-transparent-color-layer-over-background-image – Nix May 22 '15 at 13:28
  • http://jsfiddle.net/Paulie_D/1Ldowhn5/1/ – Paulie_D May 22 '15 at 13:29
  • Based on the comments I don't think this is an overlay or multiple background issue. – Paulie_D May 22 '15 at 13:30
  • @Paulie_D The issue was coz I've used `opacity: 0.5;` instead of `rgba(255,0,0,0.5); ` in my css. – Becky May 22 '15 at 13:41
  • @Nix thanks. The issue was coz I've used `opacity: 0.5;` instead of `rgba(255,0,0,0.5); ` in my css. I was able figure out the issue while creating the fiddle. https://jsfiddle.net/3x3y7rrq/ I'm not going to delete this post coz this might be helpful to someone in future. – Becky May 22 '15 at 13:43
  • @Becky If you want to improve the value of this post for future readers, I strongly suggest you edit it to include your realization or it could actually lead to more confusion. – Serlite May 22 '15 at 14:42

2 Answers2

1

Replacing opacity: 0.5; to background-color: rgba() Solved the issue:

   .smallIcons{
        background-color: rgba(255,0,0,0.5); // 50% background color
        background-image: url(../twiter.png); // 100% here
        background-repeat: no-repeat;
    }

In addition, If you're using sass you can assign your colour variable as below

   $col_var: #f00;
   .smallIcons{
        background-color: rgba($col_var, 0.5); // 50% background color
        background-image: url(../twiter.png); // 100% here
        background-repeat: no-repeat;
    }

Posted on behalf of future readers.

Becky
  • 5,467
  • 9
  • 40
  • 73
0

Check this Css. Easiest way to do that

 .class {
   background:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)
    ),url(image.jpg) no-repeat center top;
    }
Sandeep Singh
  • 259
  • 2
  • 11