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 */
}
Related
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 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 know that this can easily be done in any image editing program, I was just curious if there was a way just using css.
Example:
body {background-color: #837960; background-image: url("Images/background.jpg") background-repeat: no-repeat;}
Could you use css to fade the background image into the background color so a visible line does not exist or should I keep adding a gradient to transparency in Photoshop?
It is possible - in CSS3 you can set multiple values for background
body {
background: #837960 url("https://i.stack.imgur.com/MUsp6.jpg") 0 0 no-repeat;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(130,91,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(130,91,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(130,91,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#825b00',GradientType=0 ); /* IE6-9 */
}
However, it will work only in modern browser that supports CSS3
(code generated via http://www.colorzilla.com/gradient-editor/)
Yes it's possible with CSS using the linear-gradient() function with multiple background images:
body {
background-color: #837960;
background-image: linear-gradient(
to bottom, transparent, #837960
), url("Images/background.jpg");
background-repeat: no-repeat;
}
Specify the gradient as the first image so it gets stacked on top, and use it to fade from transparent at the top to the opaque background-color at the bottom. This will give the illusion the image underneath is fading into the background without requiring alpha-transparency on the image itself.
Ideally, you should just edit the image so as to have a consistent look across browsers.
While you can have a background gradient, that would appear behind an image, as the background images are placed over background color. In order to have the image look like it is fading into another color, you would need to place another tag on top of that the body such as:
body { background: url('https://i.stack.imgur.com/MUsp6.jpg') }
div.content {
width: 100%;
height: 100%;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
<body>
<div class="content">Example</div>
</body>
Or whatever color/positioning combination you would like. A good resource is http://www.colorzilla.com/gradient-editor/
I tried using the "ultimate CSS gradient generator" and it produced the following:
background: #657575; /* Old browsers */
background: -moz-linear-gradient(left, #657575 0%, #758585 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#657575), color-stop(100%,#758585)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #657575 0%,#758585 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #657575 0%,#758585 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, #657575 0%,#758585 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#657575', endColorstr='#758585',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, #657575 0%,#758585 100%); /* W3C */
But is seems that the gradient does not work at least with my version of IE9. So is there any way I can produce a simple horizontal gradient with IE9?
Does IE9 support CSS linear gradients?
background:#fff;
background-image: -moz-linear-gradient(top, #fff, #000);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fff),color-stop(1, #000));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/
height: 1%;/*For IE7*/
Here is a site that might help you regarding CSS gradients:
http://www.htmlcenter.com/blog/cross-browser-gradient-backgrounds/
In my option, for fixed height elements I usually use a 1px image and repeat that image across the width of the element. That way you know it will look the same in all browsers.
Example:
.element{
height: 30px;
background: url(<1px image location>) repeat-x;
}
There are also websites that will create these gradient images for you. Here is one that is free to use:
http://www.ogim.4u2ges.com/gradient-image-maker.asp