CSS Gradient overlay w/opacity

  • 23 July 2014
  • 1 reply
  • 104 views

Hi folks,

How can I set a gradient overlay with opacity on top of a banner image via CSS?

I’ve tried a few code variations without success. The image is inside the block #lp-pom-block-10

#lp-pom-block-10 {
width: 100%;
height: 100%;
center center no-repeat;
background-size: cover;

#lp-pom-block-10 {
content: ‘’;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
opacity: .6;
}
}


1 reply

Userlevel 3
Badge +1

Hi Marco - I found this bit of code on Stack Overflow that worked for me: http://stackoverflow.com/questions/16…

Here’s a sample page I threw it up on: http://unbounce.quinnomori.com/gradie…

And here’s the code that I put in my css panel in Unbounce:

#lp-pom-block-8{ <br /> background: -moz-linear-gradient(top, rgba(255,255,255,255) 0%, rgba(0,0,0,0) 59%, rgba(0,0,0,0.65) 100%), url('https://dl.dropboxusercontent.com/u/5049340/office%402x.png') no-repeat; <br /> background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,255)), color-stop(59%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))), url('https://dl.dropboxusercontent.com/u/5049340/office%402x.png') no-repeat; <br /> background: -webkit-linear-gradient(top, rgba(255,255,255,255) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url('https://dl.dropboxusercontent.com/u/5049340/office%402x.png') no-repeat; <br /> background: -o-linear-gradient(top, rgba(255,255,255,255) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url('https://dl.dropboxusercontent.com/u/5049340/office%402x.png') no-repeat; <br /> background: -ms-linear-gradient(top, rgba(255,255,255,255) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url('https://dl.dropboxusercontent.com/u/5049340/office%402x.png') no-repeat; <br /> background: linear-gradient(to bottom, rgba(255,255,255,255) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url('https://dl.dropboxusercontent.com/u/5049340/office%402x.png') no-repeat; <br /> } <br /> </style>   

You’ll need to adjust the rgba settings to match those hex colours you wanted to use and tweak the gradient fade % values, but this should work.

The reason there’s so many different background calls is for cross browser compatibility–gradient support isn’t very consistent yet.

Reply