2012-10-18 53 views
1

在我用下面的CSS規則的所有瀏覽器中的背景圖片,和它的作品固定在IE8

// it fits the background image to container 
background-size: contain; 
background-size: cover; 

是否有CSS規則,使其在IE8工作,同時,還是應該使用JavaScript?

在JavaScript的情況下,我正在使用jQuery。
什麼是最好的方式來激活我的目標?

+0

在IE8的最佳方式上伸展整個窗口的形象?那麼,可能是一個拉伸的'img'標籤,因爲IE8不會調整'background-image's – TheZ

+0

我應該如何拉伸背景圖片?我的意思是我可以做'$(body).css('background-image')'然後? –

回答

1

有一個jQuery plugin或本javascript fallback與過濾

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 

檢查same page for more跨瀏覽器的方法

+0

+1感謝您的回覆。假設圖像是外部的,我應該如何更改src ='。myBackground.jpg'? –

+0

嗨@LorraineBernard,我想你可以把它改成'src ='http://etc.com/myImage.jpg''。檢查[規格](http://msdn.microsoft.com/en-us/library/ms532920(v = vs.85).aspx) – Giona

0

你可以這樣做:

<!DOCTYPE html> 
<html> 
<head> 
<title>Test</title> 
</head> 
<body> 
    <img src="http://i47.photobucket.com/albums/f156/Bob_McBobBob/Awesome_Background_by_smirfy.jpg" class="bgimg" /> 
    <div class="frame"> 
    <div class="contents"> 
    page contents 
    page contents 
    page contents 
    page contents 
    page contents 
    </div> 
    </div> 
</body> 
</html> 

CSS:

html { 
background:#000; 
} 

html, body { 
    padding:0; 
    margin:0; 
    overflow:hidden; 
    height:100%; 
} 

.bgimg { 
    position:absolute; 
    z-index:-1; 
    width:100%; 
    height:100%; 
} 

.frame { 
    color:white; 
    width:100%; 
    height:100%; 
    overflow:auto; 
} 

.contents { 
padding:10px; 
} 

演示網站:http://jsbin.com/enevov/1/edit

就可以實現通過改變不同的效果 寬度:100%; 身高:100%; 上.bgimg,實現不同的效果,這取決於你是否想要一個失真與否,例如剛剛width: 100%將使其跨頂碰,等...

希望這有助於-ck

+0

寬度: 100%;高度:100%;不保持寬高比。 – carrabino

+0

@Anony yes yes ... – ckozl