background gradients and background images together

[Violet_82]

Hi there, I have a bit of a problem here. I have a div with a background image positioned and I want to add a gradient background to this div

<div id="myDiv">
...
</div>

CSS:

#myDiv{
    /*border:1px solid green;*/
    /*width:940px;*/
    padding:10px 0 0 20px;
    height:160px;
    background:#fafafa url("image.png") no-repeat 100% 60%;
    border:1px solid #d4d1c8;
    }

Right, I have generated my background gradient using this very interesting resource http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html and come up with the following code to integrate into my css:

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);

/* Opera */ 
background-image: -o-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #F3F4F4), color-stop(1, #FFFFFF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #F3F4F4 0%, #FFFFFF 100%);

After having read a bit on the net, it seems that you can combine background images and background gradients, so I came up with this:

#myDiv{
    /*border:1px solid green;*/
    /*width:940px;*/
    padding:10px 0 0 20px;
    height:160px;
    /*background: url("image.png") no-repeat 100% 60%;*/
    border:1px solid #d4d1c8;
        /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);

/* Mozilla Firefox */ 
background-image: url("image.png"), -moz-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);

/* Opera */ 
background-image:url("image.png"), -o-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: url("image.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #F3F4F4), color-stop(1, #FFFFFF));

/* Webkit (Chrome 11+) */ 
background-image: url("image.png"), -webkit-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: url("image.png"), linear-gradient(to top, #F3F4F4 0%, #FFFFFF 100%);
    }

That looks ok except that I am missing the image position and image repeat properties no-repeat 100% 60%
Trouble is that when I add it on, it stops working, so is there any way I can integrate them fine amd make sure that, if the browser doesn't support gradients the image is displayed correctly?
thanks

[Baradaran]

As far as I know, you can have one of either of them. A greadient is actually acting as a background image. You can not have two background images in one element.

As a workaround for the case the gradient background is not displayed due to any reason, I would suggest that you create a div with your image.png as background. Padding should be 0. Inside that div you can place another div with the gradient background. For this div you have to use margin 0. If the gradient of the child div is not displayed, you will automatically see the background of the parent div, image.png.

[Violet_82]

Well it looks like it is possible, this line actually works background-image: url("image.png"), -moz-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%); and display the background image,the only thing is that I can't position the image correctly in the div

[JorgeM]

Yes, multiple backgrounds are supported across the major browsers. You can use the background-position property to position each background independently. I have a sample of this on this page: http://www.itgeared.com/articles/1481-css3-background-size-overview/

scroll to the bottom to the section called: Multiple Background Images

[Violet_82]

Thanks, your link does help quite a bit.
I have now produced this:

#myDiv{
    /*border:1px solid green;*/
    /*width:940px;*/
    padding:10px 0 0 20px;
    height:160px;
    background: url("image.png");
    border:1px solid #d4d1c8;

        /* IE10 Consumer Preview */ 
background-image:url("image.png"), -ms-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);
/* Mozilla Firefox */ 
background-image: url("image.png"), -moz-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);
/* Opera */ 
background-image:url("image.png"), -o-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: url("image.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #F3F4F4), color-stop(1, #FFFFFF));
/* Webkit (Chrome 11+) */ 
background-image: url("image.png"), -webkit-linear-gradient(bottom, #F3F4F4 0%, #FFFFFF 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: url("image.png"), linear-gradient(to top, #F3F4F4 0%, #FFFFFF 100%);

background-position:100% 60%;
background-repeat:no-repeat;
    }

So in other words, I have managed to squeeze in the background repeat and the background position. All good if it wasn't for IE7 and IE8 that don't show the background image for whatever reason. I kind of expect that therefore I purposely left this line at the top background: url("image.png") thinking I could use it as fallback in case a browser doesn't support what seems to be effectively a double background image.
Any idea?
thanks

[rotten69]

You may need to have a look at this website and another one

When they generate a CSS3 code, it is explicitly mentioned that what browser is supported

I hope this helps

[Violet_82]

thanks, interesting tools. I used a similar one that tells you which browser supports the gradients. My question though is why are IE7 and 8 not displaying any image at all even if I have what I think is a fallback in my css:

...
 background: url("image.png");
 ...
 background-position:100% 60%;
background-repeat:no-repeat;

I mean if a browser can't understand this line background-image: url("image.png"), linear-gradient(to top, #F3F4F4 0%, #FFFFFF 100%); then surely the above should be used as a fall back and the image should be displayed anyway?!

[pritaeas]

Have you tried a non-png image? I remember that IE7 often had issues with those.

[Violet_82]

I have now pritaeas, I have just tried a .gif and as I suspected it made no difference. The problem is in the css, IE7 and 8 do't seem to like the fallback, so there must be, I am sure, another way to make ie7 and 8 to behave, ie, to get the background image to display.
thanks

[Violet_82]

I have a working example here, the code is different from what I have posted but it replicates the issue. If you look at it in IE7 and 8 the background image shouldn't be there:
http://antobbo.webspace.virginmedia.com/various_tests/gradient/test.htm