I am trying to add a gradient to a submit button in IE9 using the vendor specific CSS rule:
background: -ms-linear-gradient(#6671E8,#434991);
But for some reason this doesn't work. Is it something I'm doing wrong or is IE9 screwing things up again (or a combination of both)?
Try setting filter to none:
input[type="submit"] { filter: none; }
I haven't confirmed this, but I read it on Colorzilla's gradient generator:
http://www.colorzilla.com/gradient-editor/
Use CSS3 PIE and set -pie-background:
-pie-background: linear-gradient(#6671E8, #434991);
Try this:
background: #6671e8; /* Old browsers */
background: -moz-linear-gradient(top, #6671e8 1%, #434991 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#6671e8), color-stop(100%,#434991)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6671e8 1%,#434991 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6671e8 1%,#434991 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6671e8 1%,#434991 100%); /* IE10+ */
background: linear-gradient(top, #6671e8 1%,#434991 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6671e8', endColorstr='#434991',GradientType=0 ); /* IE6-9 */
Related
I'm applying a linear background gradient to the <html> tag but in Firefox it's not very smooth, ie you can see lines: See this image:
In chrome it's much smoother. My CSS code is as follows:
html{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3c352e+0,121212+100 */
background: #3c352e; /* Old browsers */
background: -moz-linear-gradient(top, #3c352e 0%, #121212 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3c352e), color-stop(100%,#121212)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3c352e 0%,#121212 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3c352e 0%,#121212 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3c352e 0%,#121212 100%); /* IE10+ */
background: linear-gradient(to bottom, #3c352e 0%,#121212 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c352e', endColorstr='#121212',GradientType=0 ); /* IE6-9 */
height:100vh;
}
Is there a way to smoothen this out?
Here's what I'm trying to do: http://jsfiddle.net/wLyqvrn1/1/
table {
height: 200px;
width: 200px;
background-color: #444557; /* this doesn't show below the gradient */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,ffffff+100&0.1+0,0.1+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(100%,rgba(255,255,255,0.1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(255,255,255,0.1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#1affffff',GradientType=0 ); /* IE6-9 */
}
Even though there is an answer to and older question about this, maybe it is better to add some more thorough explanation.
background-color is one of the properties inside background
When you set
background: linear-gradient(...);
even thought it looks like you are not changing background-color, you are doing so !
background expands to all of its properties, and then resets them (also because it is defined later than background-color)
hi there i am using the following code to create a gradient background in firefox... but the problem is that the gradient fills the page alright but it repeats...
<body style="background-image:linear-gradient(#eee,#ddd); background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);">
and below is the result of the above code
i want the gradient to stretch and fill the whole page... how can i do this.... any help would be appreciated thanks in advance... :)
Put this in a css file for a crossbrowser gradient:
body {
background: #2f2727; /* Old browsers */
background: -moz-linear-gradient(top, #2f2727 0%, #1a82f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f2727), color-stop(100%,#1a82f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2f2727 0%,#1a82f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2f2727 0%,#1a82f7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2f2727 0%,#1a82f7 100%); /* IE10+ */
background: linear-gradient(to bottom, #2f2727 0%,#1a82f7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2727', endColorstr='#1a82f7',GradientType=0 ); /* IE6-9 */
}
Gradient generator.
The easiest way would be to simply add background to HTML element and set its height to 100%:
html {
/* and dont forget the prefixes ;) */
background: linear-gradient(to bottom, #2f2727 0%,#1a82f7 100%) no-repeat;
height: 100%;
}
http://jsfiddle.net/Caja9/
i tried the below code and it worked
background-image:-moz-linear-gradient(#eee,#ddd); height:100%;
I am experiencing a somewhat weird bug on a website I am building.
Using Chrome/Firefox/Safari/IE10 it works fine. However, using IE9 it turns into blue! What is wrong?
I suspect this code is messing it up (#colorOne, #colorTwo is replaced by the actual colors):
.gradient (#colorOne, #colorTwo) {
background: #colorOne; /* Old browsers */
background: -moz-linear-gradient(top, #colorOne 0%, #colorTwo 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#colorOne), color-stop(100%,#colorTwo)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #colorOne 0%,#colorTwo 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #colorOne 0%,#colorTwo 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #colorOne 0%,#colorTwo 100%); /* IE10+ */
background: linear-gradient(to bottom, #colorOne 0%,#colorTwo 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#colorOne', endColorstr='#colorTwo',GradientType=0 ); /* IE6-9 */
}
You have a blue Microsoft filter gradient in your CSS on the #top element and other elements within your site. But since you're specifically asking about the header, just remove:
#top {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#colorOne', endColorstr='#colorThree', GradientType=1);
/* Remove this from any other element you wish to be green */
}
The only difference is a gradient only interpreted by IE:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#colorOne', endColorstr='#colorThree', GradientType=1
Simply remove it.
I used a css3 generator to create a gradient background.
It works on a static html page I built.
When I run my aspx there is no backgruond, though firebug shows the rule, with no conflicts, and even displays the gradient when I hover on the rule in firebug.
I fiddled it - doesn't work there either.
Here's the code:
body {
background: #a0d3ff; /* Old browsers */
background: -moz-linear-gradient(top, #a0d3ff 0%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a0d3ff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a0d3ff 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a0d3ff 0%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a0d3ff 0%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #a0d3ff 0%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d3ff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
How can I fix it?