изменить область фонового позиционирования

Question

Я использую CSS3, содержащий значение. Кажется, я хочу, чтобы он корректировал фоновое изображение при изменении размера окна. Тем не менее, область просмотра/позиционирования фона позволяет изменять размер изображения до сих пор. Обложка работает, за исключением того, что при изменении размера окна в очень большом положении видна не все изображение. смотрите здесь: CSS

body { 
    background:url('images/bg.jpg') no-repeat fixed; 
    background-size: contain; 
} 

Я хотел бы фоновое изображение, по крайней мере, занять все области, содержащие содержание (заголовок, содержание, сноска область). Кажется, это то, что нужно решить: «Изображение визуализируется, сохраняя свою внутреннюю пропорцию, при наибольшем размере, содержащемся в области фонового позиционирования, или покрытии». CSS Как изменится область фонового позиционирования?

Answer 1

Не все изображения видны, потому что размеры изображения почти квадратные, но при изменении размера браузера на полный экран, как правило, экран немного шире, чем высокий.

Я полагаю, что это одуванчики, которые вы не хотите отрезать в этом конкретном изображении. Простое исправление заключается в том, чтобы расположить его так, чтобы он был закреплен в нижней части экрана и позволил отрезать верхнюю часть.

body { 
    background:url('images/bg.jpg') no-repeat center bottom fixed; 
    background-size: cover; 
} 

Существует более обсуждение полной страницы методов фонового изображения, в том числе код, чтобы заставить его работать в MSIE, а также, on css-tricks.com

Answer 2

Существует маршрут, в котором вы можете использовать элемент img, чтобы поместить изображение позади текста, в моем jsfiddle первый сегмент кода имеет изображение за текстом, не использующее фоновый код.

Второй использует CSS. Это займет некоторое дополнительное кодирование css, но это всего лишь возможность того, что вы можете сделать. Опять же, это может быть не ваш ответ, а мысль о том, что вы можете сделать.

http://jsfiddle.net/mmsD5/

#l1 { 
overflow: hidden; 

}

#l1 p{ 
width: auto; 
max-height: auto; 
height: auto; 
overflow: hidden; 
z-index: 2; 
position: relative; 
color: #fff; 

}

#l1 img { 
position: absolute; 
width: 100%; 
height: auto; 
z-index: 1; 

}

#l2 { 
position: absolute; 
top: 40em; 
background: url(http://stylegerms.com/wp-content/uploads/2013/06/Techno-Desktop-backgrounds-Desktop-Wallpaper.jpg) no-repeat; 

}