background gradients and background images together

Question

Violet_82 89 Posting Whiz in Training

13 Years Ago

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

html-css web-design

5 Contributors
9 Replies
253 Views
4 Days Discussion Span
Latest Post 13 Years Ago Latest Post by Violet_82

Dani AI

Generated 8 Months Ago

Short answer: modern browsers can do both — a gradient is just another background layer and you control each layer with comma-separated values. As already pointed out, the trick is to list layers in the order you want them stacked (first = top). For precise control use per-layer positions/repeats (comma-separated) instead of one global value.

Example (concise modern syntax):

#myDiv {
  background:
    url("image.png") no-repeat right 60%,
    linear-gradient(to top, #F3F4F4 0%, #FFFFFF 100%);
}

If you need different positions/repeats for each layer you can also list them explicitly:

background-position: right 60%, left top;
background-repeat: no-repeat, repeat;

Why IE7/8 are hiding the image: those old IEs do not support multiple backgrounds or CSS gradients. If a browser hits an unknown value in a property it may treat that entire declaration as invalid, so a multi-value background/background-image can get ignored. That explains why your fallback sometimes disappears even though you set a simple background: url(...) earlier.

Practical fallbacks:

Use an IE-only stylesheet via conditional comments to set the plain background: url(...) no-repeat 100% 60% for IE<=8.
Or use feature detection (Modernizr) and write a .no-cssgradients #myDiv { background: url(...) } rule.
Or use the nested-div approach suggested: parent carries the image, child carries the gradient — modern browsers show the gradient layer, older ones fall back to the parent image.

Troubleshooting tips: use IE’s dev tools (F12) to inspect computed styles and see which background declaration is applied; confirm there are no stray commas or invalid tokens in your multi-value declarations; and keep the simple fallback declaration before the multi-background one so old browsers that ignore the complex line still have the single-image rule.

All 9 Replies

Baradaran 1 Junior Poster in Training

13 Years Ago

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.

Edited 13 Years Ago by Baradaran

JorgeM 958 Problem Solver

13 Years Ago

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

rotten69 20 Posting Whiz

13 Years Ago

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

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

I hope this helps

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Violet_82 89 Posting Whiz in Training · Answer 1 · 2012-12-07T10:30:29+00:00

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

Violet_82 89 Posting Whiz in Training · Answer 2 · 2012-12-07T15:03:44+00:00

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

Violet_82 89 Posting Whiz in Training · Answer 3 · 2012-12-10T10:18:53+00:00

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 2,276 Most Valuable Poster Moderator Featured Poster · Answer 4 · 2012-12-10T10:50:42+00:00

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

Violet_82 89 Posting Whiz in Training · Answer 5 · 2012-12-10T11:55:04+00:00

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 89 Posting Whiz in Training · Answer 6 · 2012-12-11T18:11:17+00:00

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:

background gradients and background images together

Dani AI

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers