Фокус вид на фоне

Question

У меня есть фоновое изображение, назначенное через background: url(""); в элемент body. Теперь, это действительно огромный образ, и я хочу сосредоточить взгляд именно на середине.

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

Я хочу, чтобы определенная часть моего изображения всегда была в центре. До сих пор я попытался использовать background-{size,attachment,position}, но не смог получить его правильно.

Мой текущий пример на http://dev.dragonsinn.tk - и CSS здесь: http://dev.dragonsinn.tk/themes/dragonsinn/css/main.ws.php

текущее изображение 1920х1080, поэтому на большинстве экранов он сконцентрируется почти правильно. Но мой местный 1024x786 - который выглядит ужасно до сих пор ...

Что такое необходимый CSS, чтобы даже сделать центр изображения с меньшим размером? Я могу использовать медиа-запросы, чтобы сделать их более крупными позже. Пока я просто хочу по-настоящему сосредоточиться.

Answer 1

Следующие центры вашего изображения и масштабируют его для разных видовых экранов.

См. Это link для получения дополнительной информации об объекте css.

Также см. http://caniuse.com/#feat=background-img-opts для поддержки браузера.

body { 
background: url("/cdn/theme/images/bg.jpg"); 
background-color: black; 
color: white; 
height: 100%; 
width: 100%; 
background-repeat: no-repeat; 
background-position: 0 0; 
background-size: cover; 
}