Background image not showing up in IE9

Background image not showing up in IE9 - css

Other browers like chrome shows up fine. IE9 just shows the gradients no images.
Code CSS
body {
background:
url('../images/adventure/background.png')
background: url('../images/adventure/background.png'), -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 40%, rgba(149,147,160,1) 100%); /* FF3.6+ */
background: url('../images/adventure/background.png'), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(40%,rgba(255,255,255,0.4)), color-stop(100%,rgba(149,147,160,1))); /* Chrome,Safari4+ */
background: url('../images/adventure/background.png'), -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 40%,rgba(149,147,160,1) 100%); /* Chrome10+,Safari5.1+ */
background: url('../images/adventure/background.png'), -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 40%,rgba(149,147,160,1) 100%); /* Opera 11.10+ */
background: url('../images/adventure/background.png'), -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 40%,rgba(149,147,160,1) 100%); /* IE10+ */
background: url('../images/adventure/background.png'), linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 40%,rgba(149,147,160,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#9593a0',GradientType=0 ); /* IE6-8 */

You need a closing semicolon (;) on the first background like this:
background: url('../images/adventure/background.png');

Related

CSS3 Gradient Background working in Chrome and Firefox but not IE 11

I currently am trying to use a linear-gradient from CSS3 as the background of a site, and from what I can tell, am following the spec to comply with Internet Explorer right, but I can't tell what's not working here.
body {
padding: 0px;
margin: 0px 0px 0px 0px;
background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(26,42,132,1) 40%, rgba(33,29,155,1) 50%, rgba(26,42,132,1) 60%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(40%,rgba(26,42,132,1)), color-stop(50%,rgba(33,29,155,1)), color-stop(60%,rgba(26,42,132,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(26,42,132,1) 40%,rgba(33,29,155,1) 50%,rgba(26,42,132,1) 60%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

We are using following CSS in one of our projects and it works on Chrome, Firefox and IE11.
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(#000, transparent);
background-image: -moz-linear-gradient(#000, transparent);
background-image: -o-linear-gradient(#000, transparent);
background-image: linear-gradient(#000, transparent);
See this Fiddle as well: http://jsfiddle.net/3ck72fbc/

css not working in chrome and IE

I am new for html and css. Here Is My css code:
background: -moz-linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0);
this background color effect not working in IE and Chrome How to change this code to work.

Vendor prefixes are no longer needed for gradients.
background: linear-gradient(to bottom, #F9F9F9, #F0F0F0);
Done.

The -moz- prefix is only used by Firefox - so you need to copy the exact line to use in the other browser-familys:
background: linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0);
background: -o-linear-gradient(center top, #F9F9F9, #F0F0F0) repeat scroll 0 0 rgba(0, 0, 0, 0);

You are doing a gradient only for Mozilla, you need to do it for IE and Chrome separately
Please check this site out as it will do the code for you but, provide comments so you get an idea how each browser responds to each line of code
http://www.colorzilla.com/gradient-editor/
Example code
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

Check the documentation https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient. It depends on javascript engine used by browsers.
As it states the doc for crossbrowser:
.grad {
background-color: #F07575; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome and Safari */
background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Fx (3.6 to 15) */
background-image: -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For pre-releases of IE 10*/
background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
}

-moz-linear-gradient is for Mozilla Browser(Firefox). You should use webkit-linear-gradient for chrome.

-moz is a prefix for Mozilla Firefox, please check this site:
http://colorzilla.com/gradient-editor/
and look through the code and comments:
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */

CSS background gradient not working in Google Chrome

I'm using the following CSS to try to get a vertical background gradient to display in most browsers.
It works fine in Firefox but is not displaying in Chrome.
You can see where I'm trying to apply the gradient in the footer section of http://blog.bmxboss.com
background: -moz-linear-gradient(top, #222222 0%, #111111 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#111111)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #222222 0%,#111111 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #222222 0%,#111111 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #222222 0%,#111111 100%); /* IE10+ */
background: linear-gradient(to bottom, #222222 0%,#111111 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#111111',GradientType=0 ); /* IE6-9 */
How can I make this work in Chrome?

Using a tool I made to generate CSS gradients, this is the CSS for a gradient from #222222 to #111111, with support for all browsers:
background: #222222;
background: -moz-linear-gradient(top, #222222 0%, #111111 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222222), color-stop(100%,#111111));
background: -webkit-linear-gradient(top, #222222 0%,#111111 100%);
background: -o-linear-gradient(top, #222222 0%,#111111 100%);
background: -ms-linear-gradient(top, #222222 0%,#111111 100%);
background: linear-gradient(to bottom, #222222 0%,#111111 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#111111',GradientType=0 );
Here is a working JSFiddle.

Color gradient not working in Firefox

Ok my problem is that in firefox my hover gradient is showing up as black to white. Black being the top color and white as the bottom. Here is the css hover code I'm using. It doesn't make sense to me because I'm not even using the color codes for black or white. Any help would be greatly appreciated!
nav a {
color: #fff;
background: #b9b9b9; /* Old browsers */
background: -moz-linear-gradient(top, #b9b9b9 0%, #616161 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b9b9b9), color-stop(99%,#616161)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b9b9b9 0%,#616161 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b9b9b9 0%,#616161 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b9b9b9 0%,#616161 99%); /* IE10+ */
nav a:hover, nav a:active {
background: #b9b9b9; /* Old browsers */
background: -moz-linear-gradient(bottom, #4f4f4f, #b9b9b9 ); /* FF3.6+ */
background: -webkit-linear-gradient(top, #b9b9b9 0%,#4f4f4f 99%); /*
background: -o-linear-gradient(top, #b9b9b9 0%,#4f4f4f 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b9b9b9 0%,#4f4f4f 99%); /* IE10+ */
background: linear-gradient(to bottom, #b9b9b9 0%,#4f4f4f 99%); /* W3C */

You are missing your closing braces.
Your code works otherwise: http://jsfiddle.net/66QQV/
nav a
{
color: #fff;
background: #b9b9b9; /* Old browsers */
background: -moz-linear-gradient(top, #b9b9b9 0%, #616161 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b9b9b9), color-stop(99%,#616161)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b9b9b9 0%,#616161 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b9b9b9 0%,#616161 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b9b9b9 0%,#616161 99%); /* IE10+ */
}
nav a:hover, nav a:active
{
background: #b9b9b9; /* Old browsers */
background: -moz-linear-gradient(bottom, #4f4f4f, #b9b9b9 ); /* FF3.6+ */
background: -webkit-linear-gradient(top, #b9b9b9 0%,#4f4f4f 99%); /*
background: -o-linear-gradient(top, #b9b9b9 0%,#4f4f4f 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b9b9b9 0%,#4f4f4f 99%); /* IE10+ */
background: linear-gradient(to bottom, #b9b9b9 0%,#4f4f4f 99%); /* W3C */
}
This is assuming that you intend to put an <a> element inside of a <nav> element ... if you meant for this to be a class or an ID (such as <span class="nav"> or <div id="nav">), you need to use .nav or #nav instead, respectively.

How can I put two CSS gradient backgrounds in one div?

I have the following CSS:
.main {
padding-right: 15px;
padding-left: 15px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+)top;
background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,0) 100%)top; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(100%,rgba(255,255,255,0)))top; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)top; /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)top; /* IE10+ */
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%) top; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#00ffffff',GradientType=0 )top; /* IE6-8 */
background-size: Auto 200px;
background-repeat: repeat-x;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+)bottom;
background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,0) 100%)bottom; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,229,229,1)), color-stop(100%,rgba(255,255,255,0)))bottom; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)bottom; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)bottom; /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%)bottom; /* IE10+ */
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,rgba(255,255,255,0) 100%) bottom; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#00ffffff',GradientType=0 )bottom; /* IE6-8 */
background-size: Auto 200px;
background-repeat: repeat-x;
padding-top: 50px;
min-height:600px;
}
And here is a live example: http://jsfiddle.net/ZtJmM/
I want that one gradient be at the top, and one at the bottom of the element. Is that possible?
Thanks!

Yes, use them in the same statement like:
background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,
rgba(255,255,255,0) 100%) top,
linear-gradient(to bottom, rgba(229,229,229,1) 0%,
rgba(255,255,255,0) 100%) bottom;

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

Background image not showing up in IE9 - css

You need a closing semicolon (;) on the first background like this: background: url('../images/adventure/background.png');

Related

CSS3 Gradient Background working in Chrome and Firefox but not IE 11

css not working in chrome and IE

CSS background gradient not working in Google Chrome

Color gradient not working in Firefox

How can I put two CSS gradient backgrounds in one div?

Categories

Resources