I have a multistop gradient created with colorzilla that I have successfully gotten to work as the background of my website. It works perfectly for firefox, chrome, and IE9. For IE7 and below, it only shows a white background, which is acceptible but not preferable, and to be frank, going back 2 generations, I am not worried about it. However, IE8 only shows a gradient from the first color to the last color, no stops in the middle, which would normally get rid of the middle color, which was white in my case. For the purposes of making it somewhat better, I changed it so the white would be the last color of that gradient, but it is by no means a perfect suggestion.
The solution, to me, appears to be converting my already created multistop gradient from the css code it is in into an image that I can repeat endlessly as necessary, as was traditionally done before the modern era of css gradients. However, I have been unable to find any sort of tool or code that would allow me to do this for a given height and width. Does anyone know of any tool, preferably free, that would satisfy these needs? For the purpose of this question, the gradient code I am using is the following:
background: #72b4f9; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcyYjRmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzU3YzE0ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzOTc3MzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #72b4f9 0%, #ffffff 25%, #ffffff 45%, #57c14f 96%, #397731 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#72b4f9), color-stop(25%,#ffffff), color-stop(45%,#ffffff), color-stop(96%,#57c14f), color-stop(100%,#397731)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* IE10+ */
background: linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A2CEFB', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
You may want to try CSS3Pie http://css3pie.com it is a quick/free solution for IE7/IE8
Or create a SVG image using the Gradient Background Maker
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
Then find a way to import to photoshop
Photoshop always works for me. Im sure you could use GIMP though. A gradient dialog in any image program generally has the same sliders and attributes thet the css generator you used would. You should be bale to create a file at the canvas size you want then essentially use the gradient tool's dialog to set the same settings. For more on that ask on SuperUser or on a forum for users of the app you go with.
Im not aware of an app that will convert the css to an image.
I ended up finding a website that did essentially what I wanted at http://gradcolor.com/. I was able to create multiple gradients at a specific size, and the website created the file for me to download and upload to the website. Thank you everyone for your suggestions, as they led to me finding this.
Related
Any idea how I can make background-image with linear-gradient to work on IE 11?
The following code works fine on IE 10 but doesn't work on IE 11.
background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);
I can make linear-gradient to work on IE 6-9, 11 using the following filter but background image is not displayed in this case.
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 )
I'm open to an ideas.
Update: Here's the code I currently have.
background-image: url(IMAGE), -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#BEE38F));
background-image: url(IMAGE), -webkit-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -moz-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -o-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 );
linear-gradient() is supported unprefixed on IE10 RTM and later, including IE11. You never need the -ms- prefix — only the pre-release versions of IE10 required it and those versions don't even run anymore. You're just wasting space by including the prefix in your CSS.
Note that the directional syntax for linear-gradient() is different; what was originally top is now represented as to bottom instead (see this blog post, this question, and the spec for details):
background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
Maddening, isn't it?
Prior to IE 11,
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cccccc');
For IE 11:
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);
That's right folks, we not only have to worry about supporting older IEs, apparently we'll now have to deal with NEWER IE quirks as well...
These are all super great solutions if you are overlaying a linear gradient directly on text. But if you want to display it overtop an image it doesn't work in IE.. don't ask me why but it doesn't.
I scowered many resources and finally came across this diddy
#media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.yourTargetClass:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
background-image: linear-gradient(-221deg, rgba(205,234,255,0.41), rgba(227,253,255,0.82)); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */ }
opacity:0.55;
}
}
I wrapped this within an IE selector for 10+. You need to include the opacity as that will help blend the gradient overlay with the content.
Hope this helps someone!
I noticed that for IE 11 the liniear-gradient works fine on itself. Unfortunately it doesn't work well as an overlay if you want to use a bacground image as well.
The only way that I was able to make it work for me was to switch to using rgba instead of hex colors and percentage. Also it only worked when I put the liniear-gradient first and not vice versa.
background-image:
linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
url('images/background.jpg');
I faced the same issue and in addition to doing the filter and linear-gradient, I also had to add the width in my CSS class, once I set the width, I could see my custom styles with background gradient.
I am Combining CSS3 gradient and background image. It is working fine in Chrome and FF and also Background image is getting repeated. in ie9 and Below i am not able to see the Background image. Any one please help me
body{background: #d5cea6; /* Old browsers */
background-image:url("cc.png"), -moz-linear-gradient(top, #d5cea6 0%, #c9c190 40%, #b7ad70 100%); /* FF3.6+ */
background-image: url("cc.png"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5cea6), color-stop(40%,#c9c190), color-stop(100%,#b7ad70)); /* Chrome,Safari4+ */
background-image: url("cc.png"),-webkit-linear-gradient(top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* Chrome10+,Safari5.1+ */
background-image:url("cc.png"), -o-linear-gradient(top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* Opera 11.10+ */
background-image: url("cc.png"),-ms-linear-gradient(top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* IE10+ */
background-image:url("cc.png"), linear-gradient(to bottom, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5cea6', endColorstr='#b7ad70',GradientType=0 ); /* IE6-9 */
}
This is the code i used
In short, no it won't work. You will not be able to do this with IE's old filter style if you're trying to combine a background image and a gradient into the same background.
The only way I know of to make this work reliably in old IE versions is to use the CSS3Pie library.
Using this library, it is possible to specify standard CSS code in old IE versiosn for various modern features, including gradients.
Download the PIE.htc script, add it into your site, then add the following lines to your CSS (and remove the filter line):
-pie-background: url("cc.png"), linear-gradient(to bottom, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* PIE */
behavior: url(PIE.htc); /* change the URL as appropriate for your site */
Now your background should behave the same even in really old IE versions as it does in modern browsers.
Hope that helps.
See also the CSS3Pie documentation.
I found a great CSS gradient code generator for a page my friend is making, but there are some comments below it that worry me:
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff)";
background-color: #CCC;
And in reply:
I strongly recommend against these! They do not act the same, are limited, hurt performance, and can cause layout issues. Simply put, since IE does not support gradients (and many other CSS features natively, without filter), either use images for the same effect (background image) or convince your client that IE users get less of an experience (who seriously cares about gradients vs single colours besides insane 'designers'?) because their browser just doesn't match up to what we as developers want. It's called graceful degradation and IE should not be any exception to that.
So what I don't know is: Should I suggest they do/do not use any of this code? Is getting IE to use this code useless/hopeless?
The filter stuff is generally regarded as bad practice, and isn't valid CSS (so your stylesheet will fail validation tests)
it's possible to set a background image for the element in question, then IE will fallback to that image if it's a version that doesn't support gradients, the beauty of it is that browsers supporting gradients don't load the background image (well, usually) so performance isn't impacted negatively.
Personally, if I were you I'd go for the background image solution, it's a lot cleaner than the whole "filter" thing, and doesn't punish people not using Internet Explorer (yay!)
If you'd like more detail, see here:
http://css-tricks.com/css3-gradients/
I'm using http://www.colorzilla.com/gradient-editor/ to create CSS gradients. THe code produced there works even in IE 6+:
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 */
So yes, you could use gradients in MS IE.
Four years after the question was asked, the issue has not gone away. I do a lot of sites for large corporates and you still find IE8 on the corporate desktop, sometimes even as the company standard.
My recommendation would be to take those lines exactly as they are offered. IE8 will use them, and any modern browser will ignore them. It keeps the designer happy that you are implementing his design to the best of the browser's ability, but you don't have to mess about with striped background images.
/* Internet Explorer 5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff)";
background-color: #CCC;
How can I make IE8 show a gradient background + image. This is possible in other browsers, but in IE it doesn't work.
In other browsers:
/* Opera */
background-image: url(gxt/images/my/eye.png) , -o-linear-gradient(top, #FFFFFF 0%, #EFCA11 100%);
/* Webkit (Safari/Chrome 10) */
background-image:url(gxt/images/my/eye.png) , -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #EFCA11));
I found the answer to my question:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#FFFFFF", endColorstr="#EFCA11",GradientType=0 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gxt/images/my/eye.png");
IE8 doesn't support CSS gradients (so that won't work). IE9 has limited support as far as I remember and IE10 will feature full support. I'm not sure what you're trying to do, but in case you'd like a background image with a gradient before or behind, how about stacking two images (one with the gradient, one with the actual background) or merging both into one image?
I have some link buttons that I'm using CSS3 gradient code that I generated from Ultimate CSS Gradient Generator. It is working great except for IE7-9 (not worrying about IE6). Instead of the nice mid-gray to dark gray it is showing a blue to black gradient. The code being used is:
background: #666666; /* Old browsers */
background: -moz-linear-gradient(top, #666666 0%, #141414 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#141414)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #666666 0%,#141414 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #666666 0%,#141414 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #666666 0%,#141414 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #666666 0%,#141414 100%); /* W3C */
To see what it is rendering like: http://bradmccullough.com.w.jaijaz.co.nz/
I have noticed that altering the display css element changes it but can't put my finger on what exactly is going on.
Thanks.
It is because you are using the shorthand color for gray in your CSS. Make sure you use #666666. Looking at the source of the stylesheet, for the IE filter, you're using #666 (although in your post above you have it right).
We had a similar problem recently. We identified that running CSS minify on the CSS files would shorten '#666666' to '#666', resulting in IE8 not being able to render the correct colour value within the 'filter' property. The only alternative was to define the colour as 'white' (our problem was with '#ffffff') or tweaking the colour slightly, i.e. '#fffffe' to prevent it from being written in shorthand.