Set background image according to screen resolutio

2019-01-21 09:28发布

站内问答 / 移动开发
1610 7 5

I would like to be able to change my webpage background image according to the screen resolution the user uses so:

if screen resolution is greater than or equal to 1200*600 then background = mybackground.jpg no-repeat or else. How can I do this?

7条回答
仙女界的扛把子
2楼-- · 2019-01-21 09:58

Hi heres a javascript version which changes the background image src according to screen resolution. You have to have the different images saved in the right size.

<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>
查看更多
0人赞 添加讨论(0) 举报
女痞
3楼-- · 2019-01-21 10:01

Pure CSS approaches that work very well are discussed here. Two techniques are examined in particular and I personally prefer the second as it not CSS3 dependent, which suits my own needs better.

If most/all of your traffic has a CSS3 capable browser, the first method is quicker and cleaner to implement (copy/pasted by Mr. Zoidberg in another answer here for convenience, though I'd visit the source for further background on why it works).

An alternative method to CSS is to use the JavaScript library jQuery to detect resolution changes and adjust the image size accordingly. This article covers the jQuery technique and provides a live demo.

Supersized is a dedicated JavaScript library designed for static full screen images as well as full sized slideshows.

A good tip for full-screen images is to scale them with a correct ratio beforehand. I normally aim for a size of 1500x1000 when using supersized.js or 1680x1050 for other methods, setting the jpg quality for photographs to between 60-80% resulting in a file size in the region of 100kb or less if possible without compromising quality too much.

查看更多
0人赞 添加讨论(0) 举报
来，给爷笑一个
4楼-- · 2019-01-21 10:02

Put into css file:

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; }

URL images/bg.jpg is your background image

查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
5楼-- · 2019-01-21 10:09

I've had this same issue but have now found the resolution for it.

The trick is to create a wallpaper image of 1920*1200. When you then apply this wallpaper to the different machines, Windows 7 automatically resizes for best fit.

Hope this helps you all

查看更多
0人赞 添加讨论(0) 举报
仙女界的扛把子
6楼-- · 2019-01-21 10:11

I know it's too old question but thought to answer, it might will help someone. If you see twitter, you will find something very tricky but pure css approach to achieve this.

<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;}

This background images fits to all size. even portrait view of ipad. it always adjust the image in center. if you zoom out; image will remain the same.

查看更多
0人赞 添加讨论(0) 举报
Deceive 欺骗
7楼-- · 2019-01-21 10:19

Set body css to :

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;

}

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)