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

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

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

Ответы

Ответ 1

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

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

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

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

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

Ответ 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;
}

Ответ 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>

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

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

}

Ответ 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; }

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