Background-image and background in 1 tag

Question

Hi,

Is it possible to have both background-image and background gradient color applied together in 1 div tag? (CSS3 and above is ok)

I have the below code, the gradient background color does show up, but the background-image doesn't.
What am I missing?

background: -webkit-gradient(linear, left top, left bottom, from(#595959), to(#2e2e2e));
background-image:url('/uploads/image1.jpg') no-repeat;
-webkit-background-size: 33px 33px;
border-bottom:1px solid #636363;
height:39px;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius: 10px;

Thanks,
Tee

Answer 1

The gradient property is part of the backgrounds module, so you need to specify background-image, not just background.

you'll want to use background size as well to ensure the background isn't full height.

For a simple example, have a look at www.Dartrite.co.uk.

Answer 2

Gradients are values that can be used in place of images. With backgrounds, the gradient is the value of the background-image property. So you can't have both an image and a gradient (though you can specify an image first and then override it with a declaration of a gradient for browsers that support gradients).