This site uses cookies to deliver our services and to show you relevant ads and job listings.
By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.
Your use of Stack Overflow’s Products and Services, including the Stack Overflow Network, is subject to these policies and terms.

Join us in building a kind, collaborative learning community via our updated
Code of Conduct.

note: you can also position the background image(15px center) or set it's 'repeat' property this way (example works for Firefox 3.6+) .some-class {background: url("../icon.png") no-repeat 15px center, -moz-linear-gradient(center top , #FFFFFF, #DDDDDD);}
– Julien BérubéDec 29 '11 at 17:53

IE9 and up can stack images this same way. You could use this to create a gradient image for ie9, though personally, I wouldn't. However to be noted when using only images, ie < 9 will ignore the fallback statement and not show any image. This does not happen when a gradient is included. To use a single fallback image in this case I suggest using Paul Irish's wonderful Conditional HTML element along with your fallback code:

.lte9 #target{ background-image: url("IMAGE_URL"); }

Background position, sizing etc.

Other properties that would apply to a single image may also be comma separated. If only 1 value is supplied, that will be applied to all stacked images including the gradient. background-size: 40px; will constrain both the image and the gradient to 40px height and width. However using background-size: 40px, cover; will make the image 40px and the gradient will cover the element. To only apply a setting to one image, set the default for the other: background-position: 50%, 0 0; or for browsers that support it use initial: background-position: 50%, initial;

You may also use the background shorthand, however this removes the fallback color and image.

One thing to realize is that the first defined background image is topmost in the stack. The last defined image will be bottommost. That means, to have a background gradient behind an image, you would need:

The code may not work but this is a very important point. You can reorder how the background elements work but you have to think of them being layered. If you want the gradient on top of the image, put it first and you'll probably want to us RGBa so you can see the image behind: background-image: linear-gradient(rgba(22,22,22,0), rgba(22,22,22,0.6)), url('image.jpg');
– staypuftmanOct 16 '17 at 17:43

This was the only solution that worked for me (Firefox v57). The linear-gradient() had to come before the url(), and partial transparency had to be used for the gradient colors, using rgba(). Anything else simply used the first definition on the list (as if the second one was a fallback, similar to how font-family declarations work).
– waldyriousDec 19 '17 at 17:15

@waldyrious note that the user wants to apply a a sort of light transparent texture over the linear gradient so image should come first because it should be rendered over the gradient
– Alex GuerreroJan 13 at 13:45

Compositing an image and a gradient via semi-transparency should have the same effect regardless of which one is in front. However, you can always define your gradients to have some transparency, but images that aren't already semi-transparent can't be easily/dynamically converted to be used in this manner. That's why I find the approach of putting the gradient first more generally useful.
– waldyriousJan 14 at 13:23

I was trying to do the same thing. While background-color and background-image exist on separate layers within an object -- meaning they can co-exist -- CSS gradients seem to co-opt the background-image layer.

From what I can tell, border-image seems to have wider support than multiple backgrounds, so maybe that's an alternative approach.

Notice that you use the filter attribute and that there are two instances of progid:[val] separated by a comma before you close the attribute value with a semicolon. Here's the fiddle. Also notice that when you look at the fiddle the gradient extends beyond the rounded corners. I don't have a fix for that other not using rounded corners. Also note that when using a relative path in the src [IMAGE_URL] attribute, the path is relative to the document page and not the css file (See source).

For my responsive design, my drop-box down-arrow on the right side of the box (vertical accordion), accepted percentage as position. Initially the down-arrow was "position: absolute; right: 13px;". With the 97% positioning it worked like charm as follows:

If you want the images to be completely fused together where it doesn't look like the elements load separately due to separate HTTP requests then use this technique. Here we're loading two things on the same element that load simultaneously...Just make sure you convert your pre-rendered 32-bit transparent png image/texture to base64 string first and use it within the background-image css call. I used this technique to fuse a wafer looking texture with a standard rgba transparency / linear gradient css rule. Works better than layering multiple art and wasting HTTP requests which is bad for mobile.

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).