issue with the opacity

Question

am facing a problem with the opacity i do have a header that have a background image and am trying to do a opacity on that background but not into white color am trying to make it on a black one here is the code

/*Start Header*/
.header {
 background-image: url(http://i.imgur.com/FzOVLvC.jpg);
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -0-background-size: cover;
 background-size: cover;
 opacity: 0.5;
 background-color: #000;
 height: 708px;

}
/*End Header*/

<!-- Start Slider -->
 <div class="header">
  <div class="slider">
   <div class="contaner">
    Slider
   </div>
  </div>
 </div>
<!-- End Slider -->

score 0 · Answer 1 · answered Jul 11 '16 at 23:43

0

Your background color is in rgb and not in rgba. try creating color using rgba() or hsla() functions if you are serious about opacity

http://www.w3schools.com/cssref/css_colors_legal.asp

answered Jul 11 '16 at 23:43

Uğur Gümüşhan

2,455
4
34
62

Prince · Accepted Answer · 2016-07-11T23:56:12.180

You can solve your problem by using rgba or hsla functions. Try to manipulate those lines to see how they work. ;)

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* pastel green with opacity */

issue with the opacity

2 Answers2