Hi,

I'm having trouble creating a gradient with a :before element on top of an background image.

Can you tell me if there's anything wrong with the css?

header:before {
content: "";
display: block;
width: 100%;
height: 70mm;
position: absolute;
top: 0mm;
left: 0mm;
background-image: linear-gradient(to bottom, rgba(0,87,149,1) 0%, rgba(0,87,149,0) 100%);
}

I even tried using multiple backgrounds, but was unable to get a gradient.

Opacity doesn't work in gradients yet, sorry! In this particular case you could perhaps make it a gradient that ends in white instead?

Can't use white because the gradient is being positioned over an image. I tried using a PNG file with a gradient but the image didn't stretch to cover the element even though I used background-size: cover.

Using an image is a good idea. Can you paste your CSS? Using background-size should work with Prince 9.

I got it to partially work using the gradient image.

Altough now using background-size: contain the gradient bottom is not at the bottom of the element and there is some overlapping from background-repeat: repeat-x.

http://cl.ly/image/3y2o0V3b150g

The element css is:

header:before {
content: "";
display: block;
width: 100%;
height: 100mm;
position: absolute;
top: 0mm !important;
left: 0mm;
background: url(../img/gradient.png) repeat-x 0mm 0mm;
background-size: contain;
z-index: 2;
}

Also the z-index is not working properly.

Hmm, I still don't see why cover does not work, as contain seems to be working as expected?