Я хотел бы иметь изображения для моего фона, которые автоматически меняются, как слайд-шоу. Но я хотел бы, чтобы изображения заполняли фон независимо от размера окна браузера... и если он уменьшен, соотношение сторон изображения не изменяется.
Вот пример того, что я пытаюсь сделать:
Как я могу выполнить эти задачи? Любая помощь будет высоко оценена.
Вы не можете, по крайней мере, не так, как сейчас.
Однако вы можете создать <img>, а с помощью css set position:absolute, масштабировать его до 100% ширины и обрезать его от родителя с помощью overflow:hidden
example: http://jsfiddle.net/GHmz7/4/
С CSS3 вы должны использовать свойство background-size.
background-size: contain; Масштабируйте изображение, сохраняя при этом его внутреннее соотношение сторон (если оно имеется) до самого большого размера, чтобы его ширина и высота могли вписываться в область фонового позиционирования.
Contain всегда соответствует всему изображению в вашем окне просмотра, оставляя непрозрачные границы ни сверху, ни слева-справа, когда соотношение фонового изображения и окна браузера не совпадает.
background-size: cover; Масштабируйте изображение, сохраняя при этом его внутреннее соотношение сторон (если оно есть) до наименьшего размера, так что его ширина и высота могут полностью перекрывать область фонового позиционирования.
Cover всегда заполняет окно браузера, отсекая некоторые волосы или уши в процессе, что я лично предпочитаю для большинства случаев. Вы можете контролировать, как ваше изображение выравнивается в окне просмотра, используя свойство background-position.
Вы можете попробовать jquery/js изменить фоновое изображение:
<!doctype html>
<html>
<head>
<title>Width resolution</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
font-size: 20px;
font-family: arial,helvetica,sans-serif;
font-weight: 700;
color:#eee;
text-shadow: 0px 0px 1px #999;
}
div {
width:auto;
height:340px;
border:#ccc groove 2px;
padding:5px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body').css({'background-color':'#ccc'});
var sw = screen.width;
function wres() {
switch(sw) {
case 1920:
$('div').css({'background':'#192000 url(bg-1920.jpg)'});
$('body').css({'background':'#001920 url(bg-1920.jpg)'});
break;
case 1600:
$('div').css({'background':'#160000 url(bg-1600.jpg)'});
$('body').css({'background':'#001600 url(bg-1600.jpg)'});
break;
case 1280:
$('div').css({'background':'#128000 url(bg-1280.jpg)'});
$('body').css({'background':'#001280 url(bg-1280.jpg)'});
break;
case 1152:
$('div').css({'background':'#115200 url(bg-1152.jpg)'});
$('body').css({'background':'#001152 url(bg-1152.jpg)'});
break;
default:
$('div').css({'background':'#102400 url(bg-1024.jpg)'});
$('body').css({'background':'#001024 url(bg-1024.jpg)'});
}
//alert(rsw);
//$('div').html(rsw);
$('.res').append(' '+sw);
$('div.res').css('width', 1920);
}
//alert(sw);
wres();
});
</script>
</head>
<body>
<h1 class="res">Resolução atual:</h1>
<div class="res">The div</div>
</body>
</html>
Вместо этого вы можете создавать классы CSS для фона и использовать .toggleClass()
Вы не можете достоверно изменять размер фоновых изображений во всех браузерах/версиях и т.д.
Эффект, который вы видите на сайте thesixtyone.com, достигается путем растяжения обычного встроенного изображения до 100% его контейнера, который является разделом заметок. Затем в верхней части этого "фонового" деления размещаются другие элементы.
Таким образом, ответ заключается не в использовании фонового изображения, а в том, чтобы сделать изображение заполнить экран в заполнителе, а затем положить другие элементы поверх него.