It seems that the background-attachment:fixed CSS property value doesn’t work for SPAN element in Internet Explorer 8 despite that W3C and all other sources are saying that IE does support “fixed” value without any restrictions.
My Simple html is as following:
<!DOCTYPE html>
<html>
<head>
<title></title>
<STYLE type="text/css">
span {
background-image:url(empty-bg.png);
background-repeat:repeat;
background-position:0 0;
background-attachment:fixed;
}
</STYLE>
</head>
<body>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
<span>HOLE</span><br/>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
Text<br/>
</body>
</html>
My expectation was that when scrolling this page the background picture should stay fixed in place, so it will create illusion of hole in the page, and this does work perfect in Firefox, but in IE it behaves like it was set to scroll. Is any workaround for IE?
Have you tried with
display: inline-block;for the span element?Anyway, please be aware that actually the IE support for background-attachement:fixed is pretty buggy, please check http://www.standardista.com/css3/css3-background-properties/#bg1 . As you can see, up to IE7 it treats the “fixed” value as “scroll”, while IE8 might wrongfully place the image.