Я хотел бы иметь возможность изменить фоновое изображение веб-страницы в соответствии с разрешением экрана, которое пользователь использует так:
если разрешение экрана больше или равно 1200 * 600, тогда background = mybackground.jpg no-repeat или else. Как я могу это сделать?
Чистые подходы CSS, которые работают очень хорошо, обсуждаются здесь. В частности, рассматриваются два метода, и я лично предпочитаю второй, поскольку он не зависит от CSS3, который лучше подходит для моих собственных потребностей.
Если у большинства/всего вашего трафика есть браузер с поддержкой CSS3, первый способ выполняется быстрее и чище (копирование/вставка г-ном Зойдбергом в другом ответе здесь для удобства, хотя я бы посетил источник для получения дополнительной информации о том, почему он работает).
Альтернативным методом CSS является использование jQuery библиотеки JavaScript для обнаружения изменений разрешения и соответственно корректировки размера изображения. Эта статья описывает технику jQuery и предоставляет живую демонстрацию.
Supersized - это специальная библиотека JavaScript, предназначенная для статических полноэкранных изображений, а также полноразмерных слайд-шоу.
Хорошим советом для полноэкранных изображений является масштабирование их с правильным соотношением заранее. Обычно я предпочитаю размер 1500x1000 при использовании supersized.js или 1680x1050 для других методов, устанавливая качество jpg для фотографий между 60-80%, что приводит к размеру файла в области 100kb или меньше, если это возможно, без ущерба для качества.
Удалите свой "код фонового изображения тела", затем вставьте этот код:
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;
}
Привет, версия 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>
Я знаю, что это слишком старый вопрос, но я подумал, что это может помочь кому-то. Если вы видите твиттер, вы найдете что-то очень сложное, но чистое 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. он всегда настраивает изображение в центре. если вы уменьшаете масштаб; изображение останется прежним.
У меня была такая же проблема, но теперь я нашел решение для нее.
Фокус в том, чтобы создать изображение обоев 1920 * 1200. Когда вы затем применяете эти обои к различным машинам, Windows 7 автоматически изменяет размер для наилучшего соответствия.
Надеюсь, это поможет вам всем
Установите тело 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;
}
Поместите в файл 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 - ваше фоновое изображение