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.
Related
I'm just kind of curious as to why I need so many different lines of CSS code to make my gradient compatible with most browsers. Isn't this something that should be universal?
Correct me if I'm wrong, but if something this simple is this not universal, I'm surprised that we don't need browser specific code for font-size, padding, margin, etc.
div.myQuestion {
width: 250px;
height: 100px;
background: #7d7e7d;
/* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=0);
/* IE6-9 */
}
<div class="myQuestion"></div>
That's because gradients are complicated.
You don't need prefixes for padding and margin because they were defined in CSS 2.1, and are simple enough.
However, gradients were defined much later, in CSS3. Moreover, the syntax changed multiple times. The behavior also changed. Some people were still arguing relatively recently to change the space of colors in which the color stops are interpolated (it's not obvious when you take transparency into account).
Then, lots of people don't update they browsers. So they are stuck with these preliminary implementations.
Now most browsers have realized vendor prefixes are a nightmare and they decided to avoid using them for new properties.
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;
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.
I found this lying around:
background-image: -moz-linear-gradient(center top, #B6D3F4, #5483B8);
I assume the 2nd and 3rd params are the start and end color of the gradient, but what exactly does the first param "center top" mean?
Given that -moz-linear-gradient is obviously specific to Mozilla, what's the equivalent CSS3 standard version of this rule?
Please have a look to the MDN. If I read right you can obmit the prefix.
<side-or-corner>
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.
For all browsers:
background: #b6d3f4; /* Old browsers */
background: -moz-linear-gradient(top, #b6d3f4 0%, #5483b8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6d3f4), color-stop(100%,#5483b8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b6d3f4 0%,#5483b8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b6d3f4 0%,#5483b8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b6d3f4 0%,#5483b8 100%); /* IE10+ */
background: linear-gradient(top, #b6d3f4 0%,#5483b8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6d3f4', endColorstr='#5483b8',GradientType=0 ); /* IE6-9 */
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.