Remove opacity from image but keep for background

Question

What im trying to do is display a block header-wrapper that has background opacity. This block contains a image and text. Also i have used background-size: cover; for a responsive image background.

My problem is I only want the block header-wrapper background to be opaque but the image too is getting an opaque display. How can this be removed, there have been similar questions asked here related but only concern with the text not been opaque.

HTML

<section>

    <div class="header-wrapper">
        <p><img src="http://dev3.rezg.net/rezbase_v3Reservations/external-bec/template5/images/flights-hover.png"/></p>
        <p>Title 1</p>
    </div>

</section>

CSS

body{
    width: 100%;
    background:url(https://aimlessblonde.files.wordpress.com/2014/10/ab-2.jpg);
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;    
}

.header-wrapper{
    background:rgba(224,74,73,0.99); 
    padding:5px; 
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px; color:#fff;
    opacity: 0.8;
    margin:0 auto;
    width: 50%;
}

.header-wrapper > p{
    display:inline-block;
    vertical-align:middle;
}

img {
  width: 200px;
}

Example on what im working : fiddle

You already have done it? `background:rgba(224,74,73,0.99); ` that 99 is the Alpha. Change that to 60 or something and remove `opacity` and it will change the opacity for the background only. — Ruddy, May 07 '15 at 07:27
@Pugazh [Do not use !important](http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css) ;) — Persijn, May 07 '15 at 07:46

score 4 · Answer 1 · answered May 07 '15 at 07:26

4

You can give following way. Don't give direct opacity: 0.8; to div give opacity to background rgba(224, 74, 73, 0.8);

.header-wrapper {
    background: none repeat scroll 0 0 rgba(224, 74, 73, 0.8);
    border-radius: 4px;
    color: #fff;
    margin: 0 auto;
    padding: 5px;
    width: 50%;
}

Check Fiddle.

Hope it helps.

answered May 07 '15 at 07:26

ketan

19,129
42
60
98

Beat me to it. `opacity: X` makes the whole element, including descendants be transperent. Whereas setting an opacitiy on the background color itself will just make that color transparent. Note that semi-transparent colors are not supported in IE8 and some other browsers, but there is an easy fallback: https://css-tricks.com/rgba-browser-support/ – Dzhuneyt May 07 '15 at 07:30

Ruddy · Accepted Answer · 2015-05-07T07:35:22.627

I think you got a little confused.

Remove opacity from .header-wrapper and just change the alpha on your background from 99 to 60 (or whatever you want).

background:rgba(224,74,73,0.60); //this last number is the alpha, has been changed from 90 to 60

Please look here to learn a little more about rgba.

Below I have made the changes to show you how it now looks.

body {
  width: 100%;
  background: url(https://aimlessblonde.files.wordpress.com/2014/10/ab-2.jpg);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.header-wrapper {
  background: rgba(224, 74, 73, 0.60);
  padding: 5px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #fff;
  margin: 0 auto;
  width: 50%;
}
.header-wrapper > p {
  display: inline-block;
  vertical-align: middle;
}
img {
  width: 200px;
}

<section>

  <div class="header-wrapper">
    <p>
      <img src="http://www.wellclean.com/wp-content/themes/artgallery_3.0/images/car3.png" />
    </p>
    <p>Title 1</p>
  </div>

</section>

yes your right i added opacity to block as well that causes the opacity to child elements. — Shanaka, May 07 '15 at 07:51

score 0 · Answer 3 · edited May 07 '15 at 08:00

0

Try like this

.header-wrapper{
    background:rgba(224,74,73,0.80); 
    padding:5px; 
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px; color:#fff;
    margin:0 auto;
    width: 50%;
}

Is this you want to achieve??? Let me know

edited May 07 '15 at 08:00

Shanaka

953
2
9
25

answered May 07 '15 at 07:28

Karthik N

515
2
9
22

score 0 · Answer 4 · answered May 07 '15 at 07:28

If you want only the background translucent, just apply that alpha to the color itself:

.header-wrapper{
    background:rgba(224,74,73,0.8); /* 0.99 -> 0.8 */ 
    padding:5px; 
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px; color:#fff;
    /* opacity: 0.8; */ /* rid of opacity */
    margin:0 auto;
    width: 50%;
}

Remove opacity from image but keep for background

4 Answers4