I'm trying to use the gradient property to create a background and for some reason, it renders gradients wrong in firefox but perfectly in chrome based browsers. I've tried using -moz- and it doesn't help. For some reason, it creates a bunch of distinct lines and it looks really bad when I try to make it bigger.
body {
height: 100vh;
width: 100vh;
background-image: radial-gradient(hwb(0 35% 65%) -100%, hwb(0 13% 87%));
background-size: 200% 200%;
background-position: bottom;
}
Check out these pictures for reference
Firefox
Chrome
Related
So I used Chrome Dev tools to check the responsiveness on an iphone and it looks fine. But when I check out the site on my actual iphone the background is completely different. Here is the link to my code https://github.com/CurtisKil/manesseGrading_2
How it looks on Devtools
How it actually looks on iphone
The problem here is:
background-attachment: fixed; does not work well with most browsers and especially does not work properly on iOS. (Read more here on why: How to replicate background-attachment fixed on iOS)
Quick Fix:
Don't use Background attachment fix for iOS.
So change your code in style.css from:
#home-section { background: url(../img/header-bg.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; min-height: 800px; }
To:
#home-section { background: url(../img/header-bg.jpg); background-repeat: no-repeat; background-size: cover; min-height: 800px; }
Alternate Solution:
Find workarounds for making background-attachment:fixed work for different browsers. Here is something to get you started:
Fixed background image with ios7
Fixed body background scrolls with the page on iOS7
I'm developing a website and i'm having trouble with Safari.
I'm using a background-image: -webkit-linear-gradient that is working perfect on Chrome, Firefox, etc... but when it comes to Safari, the output is different.
It is showing only on half of the screen.
I'm using this style on the body:
body {
background-image: -webkit-linear-gradient(-40deg, #000,#333 50%, #f9f9f9 50%);
background-size: auto 1200px;
-webkit-background-size: auto 1200px;
background-repeat: no-repeat;
background-attachment: scroll;
top: 0;
left: 0;
}
I've tried searching for a solution, but so far nothing seems to work. I've tested changing the background size to cover but it doesn't give the output i intend, as well as setting top: 0; and left: 0; as shown in other question around stackoverflow, but that didn't work too.
The link to the specific page i'm talking about is this one: https://dashiofficial.com/product/test-product-01
Does anyone know the solution for this problem?
Thanks in advance.
I have checked your website and was able to fix your safari problem.
It has nothing to do with the gradient you defined for body{} but with the background-size for .single-product{}
Try to change
.single-product {
background-size: auto 1060px;
}
to
.single-product {
background-size: 100% 1060px;
}
It works for me in Chrome and Safari (not tested in Edge or Firefox).
Was working towards a repeated background that has a spotlight and decided to use blend modes to achieve this.
However, it appears as if blend modes did not apply in Chrome.
Replicated here: http://jsfiddle.net/pptn4f5v/7/
body {
background: url("https://dl.dropboxusercontent.com/u/10686242/testfreeimage.jpg"), url("https://dl.dropboxusercontent.com/u/10686242/background-blend%20-%20Copy.png") #030303;
background-repeat: repeat, no-repeat;
background-blend-mode: multiply, normal;
background-size: auto, contain;
}
Is this a limitation of Chrome? This works perfect in Firefox.
Probably it is a bug in Chrome
However, you can get this effect more easily, and it will work ok in both browsers
Use only 2 backgrounds, and create the spot with a gradient
.test {
background: url("https://dl.dropboxusercontent.com/u/10686242/testfreeimage.jpg"),
radial-gradient(circle at 250px 100px, transparent 50px, #606060 150px);
background-blend-mode: darken;
height: 400px;
}
<div class="test"></div>
When playing with striped gradients made with CSS, I found a strange behavior of IE, where the stripes became invisible after reducing the height value in the background-size property.
This behavior only in IE: Chrome and Firefox work as expected.
Here's the code :
The HTML
<body>
<div class="stripes all"> </div>
<div class="stripes no_ie"> </div>
</body>
The CSS
.stripes {
height: 500px;
background-image: linear-gradient(red 1px, transparent 1px);
background-attachment: scroll;
background-position: 0 -10px;
background-color: white;
}
.all {
background-size: 100% 98px; /* Will show stripes in IE */
}
.no_ie {
background-size: 100% 97px; /* Will not show anything in IE */
}
Here's the demo:
http://jsbin.com/jipehipobele/1/edit
Could someone explain to me why this happens and how to circumvent it, if possible?
My workaround to this problem now is changing the tabstops of the gradient a little bit:
background-image: linear-gradient(red 1px, transparent 1.1px);
This works in IE and does not change the background-size. Thank you anyway, Taruckus for helping me find this workaround.
Pretty weird issue. I found that it has to do with the browser scaling; if you zoom in at all using your browser / IE, the stripes will show. the zoom property is an old IE dog, so giving it a minimal value is hopefully an appropriate workaround.
.stripes {
height: 500px;
background-image: linear-gradient(red 1px, transparent 1px);
background-attachment: scroll;
background-position: 0 -10px;
background-color: white;
zoom:1.05;
}
more on zoom http://css-tricks.com/almanac/properties/z/zoom/
I have an image for a background for a div that doesn't exactly fit. Is there a way, using css, to change the size of the image (e.g. background-size:10%)?
.header-tab { background: transparent url(/resources/images/light-green-gradient.png) repeat-x scroll 0 0; }
background-size is a css3 value which can be set
see: http://www.w3.org/TR/css3-background/#the-background-size
or use this method
http://css-tricks.com/how-to-resizeable-background-image/
background-size isn't implemented yet in any browser, but there is -*-background-size for the newest versions of Mozilla, Webkit, Konqueror and (buggy) Opera:
background-size: 10%;
-moz-background-size: 10%;
-o-background-size: 10% auto; /* Opera needs x AND y values, or no background! */
-webkit-background-size: 10%;
-khtml-background-size: 10%;
Don't use it in Opera together with background-attachment:fixed.
Mozilla Developer Center has more and a workaround for Firefox 3.5.
For older browsers, you can emulate it with an img like in Jimmy's second link, but then of course you'd have to figure out how to hide that image from new browsers.