Question

我希望能够根据用户使用的屏幕分辨率更改我的网页背景图片：

如果屏幕分辨率大于或等于1200 * 600，那么background = mybackground.jpg no-repeat or else。我怎么能这样做？

Answer 1

讨论here讨论了非常好用的纯CSS方法。特别考察了两种技术，我个人更喜欢第二种，因为它不依赖于CSS3，它更适合我自己的需要。

如果您的大部分/全部流量都具有支持CSS3的浏览器，则第一种方法更快更清晰（由Zoidberg先生在另一个答案中复制/粘贴以方便使用，但我访问the source了解其工作原理的进一步背景。）

CSS的另一种方法是使用JavaScript库jQuery来检测分辨率变化并相应地调整图像大小。 This article涵盖了jQuery技术并提供了现场演示。

Supersized是一个专门用于静态全屏图像和全尺寸幻灯片的JavaScript库。

全屏图像的一个好建议是事先用正确的比例缩放它们。当使用supersized.js或1680x1050用于其他方法时，我通常瞄准尺寸为1500x1000，将照片的jpg质量设置在60-80％之间，如果可能的话，文件大小在100kb或更小的范围内，而不会影响质量太多

Answer 2

删除“正文背景图片代码”，然后粘贴以下代码：

html { 
    background: url(../img/background.jpg) no-repeat center center fixed #000; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 3

嗨，这是一个javascript版本，根据屏幕分辨率更改背景图像src。您必须以正确的大小保存不同的图像。

<html>
<head>    
<title>Javascript Change Div Background Image</title>        
<style type="text/css">    
body {
         margin:0;
         width:100%;
         height:100%;
}

#div1 {   
    background-image:url('sky.jpg');
    width:100%
    height:100%
}    

p {    
    font-family:Verdana;    
    font-weight:bold;    
    font-size:11px;    
}    
</style>    

<script language="javascript" type="text/javascript">
function changeDivImage()    
{   
//change the image path to a string   
var imgPath = new String();        
imgPath = document.getElementById("div1").style.backgroundImage;  

//get screen res of customer
var custHeight=screen.height;
var custWidth=screen.width;

//if their screen width is less than or equal to 640 then use the 640 pic url
if (custWidth <= 640)
    {
    document.getElementById("div1").style.backgroundImage = "url(640x480.jpg)";
    }

else if (custWidth <= 800)
    {
    document.getElementById("div1").style.backgroundImage = "url(800x600.jpg)";
    }

else if (custWidth <= 1024)
    {
    document.getElementById("div1").style.backgroundImage = "url(1024x768.jpg)";
    }

else if (custWidth <= 1280)
    {
    document.getElementById("div1").style.backgroundImage = "url(1280x960.jpg)";
    }

else if (custWidth <= 1600)
    {
    document.getElementById("div1").style.backgroundImage = "url(1600x1200.jpg)";
    }

else {
    document.getElementById("div1").style.backgroundImage = "url(graffiti.jpg)";
     }

    /*if(imgPath == "url(sky.jpg)" || imgPath == "")        
    {            
    document.getElementById("div1").style.backgroundImage = "url(graffiti.jpg)";        
     }
    else        
     {            
     document.getElementById("div1").style.backgroundImage = "url(sky.jpg)";        
     }*/
}    

</script>
</head>
<body onload="changeDivImage()">            

<div id="div1">   

 <p>This Javascript Example will change the background image of<br />HTML Div Tag onload using javascript screen resolution.</p>    
 <p>paragraph</p>
</div>    

<br/>    

</body>
</html>

Answer 4

我知道这是一个太老的问题，但想回答，它可能会帮助某人。如果你看到twitter，你会发现一些非常棘手但纯粹的css方法来实现这一点。

<div class="background"><img src="home-bg.png" /></div>
Applied CSS
.background {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 200%;
    left: -50%;
    position: fixed;
    width: 200%;}

.background img{
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
    right: 0;
    top: 0;}

此背景图片适合所有尺寸。甚至是ipad的纵向视图。它总是调整中心的图像。如果你缩小;图像将保持不变。

Answer 5

我遇到了同样的问题，但现在已经找到了解决方法。

诀窍是创建1920 * 1200的壁纸图像。然后，当您将此壁纸应用于不同的计算机时，Windows 7会自动调整大小以获得最佳效果。

希望这可以帮助你们所有人

Answer 6

将body css设置为：

body { 
background: url(../img/background.jpg) no-repeat center center fixed #000; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

Answer 7

放入css文件：

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

网址 images / bg.jpg 是您的背景图片

根据屏幕分辨率设置背景图像

7 个答案: