Установите фоновое изображение в соответствии с разрешением экрана - PullRequest
Новая
       21

Установите фоновое изображение в соответствии с разрешением экрана

23 голосов
/ 30 июня 2010

Я хотел бы иметь возможность изменять фоновое изображение моей веб-страницы в соответствии с разрешением экрана, которое использует пользователь:

, если разрешение экрана больше или равно 1200 * 600, тогда background = mybackground.jpg noповторить или еще.Как я могу это сделать?

Ответы [ 7 ]

23 голосов
/ 30 июня 2010

Чисто CSS подходы, которые работают очень хорошо, обсуждаются здесь .В частности, рассматриваются два метода, и я лично предпочитаю второй, так как он не зависит от CSS3, что лучше соответствует моим потребностям.

Если большая часть / весь ваш трафик имеет браузер с поддержкой CSS3, первый способ быстрее и чище реализовать (скопируйте / вставьте г-н Зойдберг в другом ответе для удобства, хотя я бы посетил * 1005)* исходный код для дополнительной информации о том, почему он работает).

Альтернативный метод CSS - использовать библиотеку JavaScript jQuery для обнаружения изменений разрешения и соответствующей настройки размера изображения. Эта статья описывает технику jQuery и предоставляет живую демонстрацию.

Суперразмер - это специальная библиотека JavaScript, предназначенная для статических полноэкранных изображений, а также для полноразмерных слайд-шоу.

Хороший совет для полноэкранных изображений - масштабировать их с помощьюправильное соотношение заранее.Обычно я нацеливаюсь на размер 1500x1000 при использовании supersized.js или 1680x1050 для других методов, устанавливая качество jpg для фотографий в пределах 60-80%, что приводит к размеру файла в области 100 КБ или меньше, если это возможно, без чрезмерного ухудшения качества.

9 голосов
/ 16 октября 2012

Удалите свой "код фона изображения тела" и вставьте этот код: 

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;
}
4 голосов
/ 24 августа 2010

Привет, вот версия javascript, которая изменяет фоновое изображение в соответствии с разрешением экрана.Вы должны сохранить различные изображения в правильном размере. 

<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>
3 голосов
/ 09 октября 2012

Я знаю, что это слишком старый вопрос, но подумал, что ответить, это может кому-то помочь. Если вы увидите твиттер, то найдете для этого что-то очень хитрое, но чистое 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. это всегда корректирует изображение в центре. если вы уменьшите масштаб; изображение останется прежним.

1 голос
/ 14 октября 2013

Установить для тела 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;

}

1 голос
/ 13 декабря 2012

У меня была такая же проблема, но теперь я нашел решение для нее.

Хитрость в том, чтобы создать фоновое изображение 1920 * 1200.Когда вы затем применяете эти обои к различным машинам, Windows 7 автоматически изменяет размеры для наилучшего соответствия.

Надеюсь, это поможет вам всем

0 голосов
/ 22 января 2014

Поместить в файл 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; }

URL images / bg.jpg - это ваше фоновое изображение

...