background-color tint effect applied to a background-image

1 Views

I have tried applying a color overlay with transparency to a background image, the background image is displaying and hopefully the code is okay for this, but if someone has a more efficient way of doing this please share.

When I try and apply the background-color with rgba values and transparency, nothing shows…

Read More

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;
}

http://i.stack.imgur.com/8iNun.png

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. Use a non-changing gradient as a second background image

    JSfiddle Demo

    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);
}