Check out this pen in Chrome and then Firefox:
http://codepen.io/richbrat/pen/fLdFw
In Chrome the SVG is scaling appropriately but not in Firefox. Why is that, has it got something to do with preserveAspectRatio in SVG?
The SVG is here:
https://s3-us-west-2.amazonaws.com/s.cdpn.io/156826/bg.svg
Check out CSS
background-size: 100% 100%;
Take a look at Browser compatibility: http://caniuse.com/#search=background-size
For this effect that you look for, a linear background could be used as well :
background: #e8f5fa linear-gradient(to bottom right, transparent 51%, #DAEAF3 50%) ;
For the background-size, it can be written this way too:
background: #e8f5fa url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/156826/bg.svg') no-repeat 0 0 / 100% 100%;
Related
By referring to this website：http://css3pie.com/documentation/supported-css3-features/，
"background-size (will always use the image's intrinsic size) — this is supported as of PIE 2.0 beta"
Based on the documentation, background-size is now supported in PIE 2.0 beta, however, I'm unclear on how to make it works on IE8.
Before making changes:
.navbar-inverse {
background:url('header_images/menu_bg.png');
background-size: 100% 50px;
}
The codes work fine for IE9 and IE10; but I want it works on IE8 too, so I added two lines:
.navbar-inverse {
background:url('header_images/menu_bg.png');
background-size: 100% 50px;
-pie-background: url('header7/header_images/menu_bg.png') no-repeat 100% 100% / 100% 50px;
behavior: url(header7/pie/PIE.php);
}
The background-size is still not functioning. It there anything wrong with my codes?
I ran into a similar issue with CSS3PIE.
I found my fix here
.pie_bg{
background: url("../images/background.jpg") left top no-repeat;
background-size: 100% auto;
-pie-background: url("../images/background.jpg") left top / 100% auto no-repeat;
}
/* NB Image path must be relative to the html doc, not the css file. Alternatively, it can be an absolute path e.g. url("http://mywebsite.com/images/background.jpg")*/
IE8 does not support background-size property.
try out this polyfill from github.
Using this should allow you to use background-size property in IE8 without any issues.
I found an opposite result in Firefox and Chrome when rendering a gradient background with offset set.
Here my css code:
html
{
background:linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(255,255,255,0) 8%);
background-position: center top 30px;
}
body
{
background:linear-gradient(to bottom, rgba(255,255,255,0) 92%,rgba(245,245,245,1) 100%);
background-position: center bottom 100px;
}
The idea is to apply a sort of "Sliding doors" of background applying 2 opposite gradient onto html and body elements.
The problem rises when I set the bottom offset in Body tag: Firefox translates up with positive values, while Chrome translate up with negative values (or bottom with positive). So two major browsers have opposite behaviour.
How to solve this?
I found solution for Chrome!
It is sufficient to add
background-repeat:no-repeat;
to BODY tag css declaration, as showed in this updated JsFiddle:
I'm struggling to get the size of CSS3 gradients to work properly. I've set a background-size:800px; yet, as seen in the jsfiddle below, it most certainly isn't 800px. Have I misunderstood the property? It seems to work differently in different circumstances; when used without other headers the background resizes with the browser, when included in the H5BP it doesn't resize, but is far too short in height.
I am very very confused! How on earth do I create a repeating background gradient of a specific size?
body {
background: #0d1a2d;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1b355a), color-stop(50%, #000000), color-stop(100%, #1b355a));
background-image: -webkit-linear-gradient(#1b355a, #000000 50%, #1b355a);
background-image: -moz-linear-gradient(#1b355a, #000000 50%, #1b355a);
background-image: -o-linear-gradient(#1b355a, #000000 50%, #1b355a);
background-image: linear-gradient(#1b355a, #000000 50%, #1b355a);
background-size: 800px;
}
jsfiddle: background-size example
You need to specify the size in both the x and y direction, like so:
background-size: 800px 800px;
View on JSFiddle
With that said, what you've done is compliant with the CSS3 specs. According to the MDN, however -- and what we can gather from your experiment -- browser compliance with this spec is inconsistent and unreliable. So, for now, it's best to explicitly define both directions.
Once browsers' behavior complies with the specs, setting a single value will set the other to be auto.
Code:
body { background-attachment: fixed !important; filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#000000,endColorStr=#3d3c3c); }
Gradient does not stay fixed in IE8 but scrolls into a plain white background. Gradients stay fixed in Firefox and Chrome and scroll with the page.
Is there any way to have it fixed in IE8 as well? I wasn't even aware this was an issue (can't find anything according to Google).
Edit: I created a test page with the code above (and quite a bit of Lorem Ipsum) and the background was fixed like it should be. So it must be something in my layout.
It looks like all you're missing is to set a height on the body. Adding this style works for me in IE 8:
html, body {height: 100%}
So, using your style from your fiddle, it would look like this:
html, body {height: 100%}
body {
background-attachment: fixed !important;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff);
}
And this is what the cross-browser version would look like:
html, body {height: 100%}
body {
background-attachment: fixed !important;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#000000, endColorstr=#ffffff);
background-image: -moz-linear-gradient(center top -90deg, #000000, #ffffff);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#ffffff));
}
Obviously, you could put the IE specific code elsewhere and load it conditionally, etc.
This tested fine in IE 8, Firefox 3.6, Chrome 9 & Safari 5 (Webkit) but does not work in Opera. For Opera, SVG or actual background image?
When I use gradients, with little content, the gradient repeats, how can I prevent that?
http://jsfiddle.net/mcqpP/1/
I can try using html { height: 100%; }, but when my content requires scrolling ... the gradient repeats
http://jsfiddle.net/mcqpP/3/
How can I fix this
You need to set percentages on the CSS gradients, not absolute pixels. And as long as you only care about modern browsers (i.e. you don't care about IE6) then I suggest you stay away from images, the CSS works fine.
I'm pulling my answer from the answer to this question that I wish I could upvote 100 times:
How to get a vertical gradient background to work in all browsers? That accepted answer has everything you need with full cross browser compatibility.
Here's where I took your example and made it work: http://jsfiddle.net/HJvpf/1/
body {
background: -moz-linear-gradient(top, red 0%, blue 100%);
background: -webkit-gradient(linear, left top, left 100%, from(red), to(blue));
}
Oh and in your 2nd jsFiddle link, the reason it was repeating the gradient is because you set height 100% on html but the gradient was on body. You move that height: 100%; to the body and it works fairly well, but as you can see in my solution you don't need to specify height at all.
Edit: So you don't want it to repeat, but you also don't want it to take up the entire height. Just set repeat-x. http://www.w3schools.com/css/pr_background-repeat.asp
body {
background: -moz-linear-gradient(top, red, blue) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
To have the bottom gradient color fill the rest of the space:
body {
background: blue -moz-linear-gradient(top, red, blue) repeat-x;
background: blue -webkit-gradient(linear, left top, left bottom, from(red), to(blue)) repeat-x;
}
Why not render your gradient out as an 1px-wide image and use something like the following:
body {
background-color: #fff;
background-image: url("images/background.jpg");
background-position: center top;
background-repeat: repeat-x;
}
Setting the background-repeat value will help you control how the background... repeats. In this case it would be rendered as a solid band across the top.
http://www.w3schools.com/css/pr_background-repeat.asp
Also, using an image should work across all browsers, whereas the moz-gradients could be problematic. The image method above should render very predictable results across all browsers.
I had the same problem but realised that it made sense and so just accepted the scrolling / repeating gradient. You could set a fixed height, not %, but to ensure that the gradient didn't repeat you would need to set the height as bigger than anybody's screen who wants to view it. And you don't know what resolutions people have. My advice is to just leave it.