Setting opacity to background-image and background-colour

Question

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

.smallIcons{
    background-color: #f00;
    opacity: 0.5; //          


        

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