1

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

Tatu Ulmanen
  • 123,288
  • 34
  • 187
  • 185
teepusink
  • 27,444
  • 37
  • 107
  • 147
  • See: http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients – nico Jun 01 '10 at 07:02
  • I use this all the time, as i quite fancy css3. To avoid any complications, I suggest you simply use the css3 gradient together with an tag. despite great efforts, all attempts to make a fully cross browser compatible multiple background solution have failed. –  Feb 20 '12 at 03:52

5 Answers5

0

Yes you can use background images with gradients, Like this:

.example {
    height: 200px;
    width: 200px;
    background: url("https://i.stack.imgur.com/vNQ2g.png?s=50&g=1") no-repeat scroll center center, linear-gradient(45deg, #000, #F00) repeat scroll 0% 0% transparent;
}
<div class="example"></div>

Pretty much just using the background shorthand property with two comma separated values.

apaul
  • 16,092
  • 8
  • 47
  • 82
0

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.

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
0

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).

David Baron
  • 920
  • 4
  • 5
0

Its working fine check it 

.example {
    background: url("https://i.stack.imgur.com/vNQ2g.png?s=50&g=1") no-repeat scroll center center, transparent linear-gradient(45deg, #000, #f00) repeat scroll 0 0;
border-bottom: 1px solid #636363;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
height: 200px;
width: 200px;
}
<div class="example"></div>
Ram
  • 130
  • 9
0

Using the :after & :before pseudo-selectors, you can have up to 3 different backgrounds, layered: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/. Hope this helps!

Beth Budwig
  • 114
  • 6