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)
I have this strange horizontal line across the my gradient div. It is only showing in Safari and only on retina displays and I can't figure out why. Has anyone else had this problem?
HTML:
<div class="img-gradient2"></div>
CSS:
.img-gradient2 {
position: absolute;
width: 100%;
height: 100%;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 26%, rgba(0,0,0,0.01) 27%, rgba(0,0,0,0.5) 68%, rgba(0,0,0,0.6) 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* Chrome,Safari4+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=0 ); /* IE6-9 */
}
I've run into the same bug. It appears to be triggered by a gradient background in Webkit on a retina display. I've reproduced it on a MBP and an iPad.
After a little testing, I've figured out a work around. Since the Webkit rendering engine appears to be painting a one pixel line of non-transparent background along the edge of the gradient, you can simply tell it to position the background one pixel up by tweaking the background-position-y. (For other folks reading this, if you are doing a side-to-side gradient rather than top-to-bottom, then change that to background-position-x.)
However, this will expose the underlying content by one pixel on the opposite side from the gradient, so you can change the absolute position of the gradient overlay by one.
background-position-y: -1px;
bottom: -1px;
Depending on your setup, changing the bottom (or top) might not produce the desired result depending on how the gradient interacts with the underlying content. Still, the background-position-y trick will remove the black line which might be better.
Full Code
.img-gradient2 {
position: absolute;
width: 100%;
height: 100%;
/** Workaround fix for Webkit black-line on retina displays **/
background-position-y: -1px;
bottom: -1px;
/**/
background: -moz-linear-gradient(top, rgba(0,0,0,0) 26%, rgba(0,0,0,0.01) 27%, rgba(0,0,0,0.5) 68%, rgba(0,0,0,0.6) 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* Chrome,Safari4+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 26%,rgba(0,0,0,0.01) 27%,rgba(0,0,0,0.5) 68%,rgba(0,0,0,0.6) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=0 ); /* IE6-9 */
}
Hi guys i am making a website for my college project and i am not very good at using Dreamweaver CS6. I made my designs in photoshop and i am struggling to use my gradient background in my website. I have tried a couple of times to get it to work but it either repeats a lot of times or it fills up as certain amount of the page but cuts off. Any help would be appreciated thank you in advance.
Here is the CSS code
html body
{
background: linear-gradient(to top, #48E7A2 0%, #86C4ED 100%);
background-size:cover;
}
You can copy this code. From http://www.colorzilla.com/gradient-editor/
You should use it on the html{} not on the body{}
and add height:100%;
html {
height: 100%;
background: #48e7a2; /* Old browsers */
background: -moz-linear-gradient(top, #48e7a2 0%, #86c4ed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#48e7a2), color-stop(100%,#86c4ed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #48e7a2 0%,#86c4ed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #48e7a2 0%,#86c4ed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #48e7a2 0%,#86c4ed 100%); /* IE10+ */
background: linear-gradient(to bottom, #48e7a2 0%,#86c4ed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48e7a2', endColorstr='#86c4ed',GradientType=0 ); /* IE6-9 */
}
DEMO
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 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?