Geek asks and answers

Fixing background size 100% for IE8?

I have the following css to get a background image to stretch it 100%.

.sectionclass {
  background: url('../img/bg.png') 50% 0 no-repeat fixed;
  background-size:100%;
  width: 100%;
  position: relative;
  line-height: 2;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg.png', sizingMethod='scale');
}

This works well in the latest version of IE, but when I look at IE7 or IE8, the background will not go full width. What would be the easiest way to solve this problem?

+3
source share
2 answers

Unlike all other url()CSS paths that refer to the directory where your stylesheet is located, the path srcrefers to the page where the stylesheet is used.

, , img ( ..), src , :

  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/bg.png', sizingMethod='scale')
+8
.yourclass {
    background:url(image-path) repeat fixed 100% 100%;
    background-attachment:fixed;
    background-size:100%;
    background:url(image-path) repeat fixed center center\9;

   /*IE 9*/
    background:url(image-path) repeat fixed top 100%; /* IE9 */
    background-attachment:fixed; /* IE9 */
    background-size:100%; /* IE9 */
}
+1

More articles:


All Articles