0

I have styling for a <div> in my page as below;

.maintab1{
background:rgb(0,65,135);
background:-moz-linear-gradient(-45deg,  rgba(0,65,135,1) 0%, rgba(30,127,201,1) 29%, rgba(53,154,255,1) 62%);
background:-webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,65,135,1)), color-stop(29%,rgba(30,127,201,1)), color-stop(62%,rgba(53,154,255,1)));
background:-webkit-linear-gradient(-45deg,  rgba(0,65,135,1) 0%,rgba(30,127,201,1) 29%,rgba(53,154,255,1) 62%);
background:-o-linear-gradient(-45deg,  rgba(0,65,135,1) 0%,rgba(30,127,201,1) 29%,rgba(53,154,255,1) 62%);
background:-ms-linear-gradient(-45deg,  rgba(0,65,135,1) 0%,rgba(30,127,201,1) 29%,rgba(53,154,255,1) 62%);
background:linear-gradient(-45deg,  rgba(0,65,135,1) 0%,rgba(30,127,201,1) 29%,rgba(53,154,255,1) 62%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004187', endColorstr='#359aff',GradientType=1 );
}

I want to include an image image.png as the background image along with the CSS3 gradient.

I checked this stackoverflow question and this article and ended up with the following code;

background-image:url(image.png), -moz-linear-gradient(-45deg,  rgba(0,65,135,1) 0%, rgba(30,127,201,1) 29%, rgba(53,154,255,1) 62%);

and applied the for all other attributes and is working fine.

But this is not working in IE8 (only tested in IE8 and FF3+) and believe not going to work in older ones. The gradient is working perfect, but the image is not coming.

Can somebody tell me the way to display background image along with CSS3 gradient other than the way I already mentioned?

Community
  • 1
  • 1
Alfred
  • 21,058
  • 61
  • 167
  • 249
  • Have you checked this one? http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients – codef0rmer May 03 '12 at 12:24
  • This may solve your issue: http://www.heresonesolution.com/2010/09/using-a-css-gradient-and-a-background-image-on-the-same-element/ – codef0rmer May 03 '12 at 12:24

3 Answers3

1

You may solve it by using background-image:. But this won't work in all browsers. The better way is to nest the image in a <div> or some selector and give the parent selector a gradient styling. This really works!!

0

I have made a quick fiddle that as far as I can se works in IE7+ (my IE8 showed the right gradient due to the filter option. It falls back to the image in IE7.

http://jsfiddle.net/MarkusK/HWLG9/

I can't see what the problem you are experiencing is but it might be due to the starting:

background:rgb(0,65,135);

But as far as I remember it should not overshine the background image, but you might not be pointing to the image?

I tried to remove the filter from the fiddle and then IE8 shows the image just fine.

EDIT: Sorry did not read your question correctly. No the gradient will "fill" over the image. You could use some rgba with transparency but that would not work in IE8 due to how the filter works.

Markus Krogh
  • 73
  • 4
-1

I always add class to the html so that you can style browser-specific.

Than you can just target .ie8 or .ie and make an extra file for IE with both gradient and img.

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" dir="ltr" class="ie6 ie"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" dir="ltr" class="ie7 ie"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" dir="ltr" class="ie8 ie"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" dir="ltr" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="non-ie" lang="en" dir="ltr"> <!--<![endif]-->
mreq
  • 6,414
  • 4
  • 37
  • 57
  • i don't mean this, I want to if its possible to display background image other than the way i specifies. thank you. – Alfred May 03 '12 at 10:01