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?
Related
Here's a link to my jsfiddle.
http://jsfiddle.net/inthenameofmusik/ddto077m/5/
The gradient restarts over and over in every box or element it seems. I'm not sure what's wrong with my CSS. Any help appreciated.
body {
background: linear-gradient(#1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* W3C */
}
I'm sure this is a simple fix, sorry for the CSS beginner-ness of this question.
You need to add html, body {height:100%;} to your style to force the browser to render the html parent tag at full height. Currently it's rendering only about 100px tall and the body background is repeating.
See this update fiddle for example.
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%;
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 am using the IE filter to make the background have a gradient, but only in IE8 does it have an issue. These lines make the background gradient correctly but the page will no longer scroll:
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) no-repeat fixed;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#1e5799',GradientType=0 ) no-repeat fixed; /* IE6-8 */
I have also tried setting the height to 100%.
What is wrong?
http://asthmaready.org/training-programs/
try to attach filter-gradient to div#page
UPDATE:
body.cbgc {
background: -moz-linear-gradient(top, rgba(125,185,232,0) 0%, rgba(30,87,153,1) 100%) no-repeat fixed;
....
}
somehow blocks subsequent #page style declaration, so when you apply a filter to it, it is ignored. Try to remove and apply filter to #page it to see if this helps.
Another point is that gradient on #page will not end on the screen edge (as in other browsers) instead it will proceed to the scrolled area. If this is relevant to you, you can add additional div, a sibling with #page, and apply to it that filter and position fixed. So everything will look the same as in non-IE browsers
Just had the same problem! As Caligula answered, don't apply the filter to the body, the -moz, -webkit, ... however will work fine. Apply the filter:progid to the first div inside your body (if needed add a div.container {height:100% width:100%})