I need to add transparency to the PNG that I'm using as background. How can I add transparency?
section#testimonials {
height: 647px;
background: url("../img/yellow_testimonial.png") repeat-x 0 0;
padding: 0;
color: #e4e5e2;
z-index: 500;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
}
1 Answer
by default, if you has been saved correctly the .png file you should not have that problem. I see that in your css style don't have a background color defined.
Try this:
section#testimonials {
height: 647px;
background: url("../img/yellow_testimonial.png") repeat-x 0 0 #0099FF;
padding: 0;
color: #e4e5e2;
z-index: 500;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
}
This is one option, another way that you can try is applying an rgba code, like this: rgba(200, 54, 54, 0.5) on parent div background style.
I hope you find it helpful.
