A background color effect applied to a background image
I tried to apply a color overlay with transparency to the background image, the background image is displayed and hopefully the code is fine for this, but if anyone has a more efficient way to do this please share.
When I try to apply a background color with rgba values and opacity nothing is displayed ...
Any suggestions?
.call-to-action {
color: #fff;
background: url(images/cta-bg.jpg) no-repeat center center fixed;
background-color: rgba(255, 255, 255, 0.5) !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
font-size: 18px;
padding: 48px 12px;
text-align: center;
}
+3
source to share
2 answers
Use an immutable gradient as the second background image
CSS
div {
width 200px;
height:200px;
margin: 25px;
border:1px solid grey;
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0.5) 100%), url(http://lorempixel.com/output/city-q-c-200-200-1.jpg);
}
+9
source to share