CSS Позиционирование изображения

Question

Допустим, у меня есть изображение шириной 2000 пикселей. Привлекательная часть моего изображения начинается с 600 пикселей в ширину и 900 пикселей в ширину или около того. Что я хочу сделать, так это использовать это изображение в качестве фона на веб-сайте и сосредоточить эффектный дизайн, а при растяжении окна браузера показать все изображение, сохраняя при этом эффектный дизайн в центре. Как я могу это сделать? Кроме того, помещать эффектную часть в собственный слой над фоном не рекомендуется.

Спасибо

Answer 1

Вы можете центрировать фоновое изображение, используя атрибут CSS background-position:

background-position: top center;

Answer 2

Чтобы добавить к ответу Гуффы, вы также можете использовать процентные и пиксельные значения для позиционирования фонового изображения:

/* Centered vertically, 200px down from the top of the page  */
background-position: 50% 200px;

/* 30px from the left edge, -10px from the top (shifted up beyond the top)  */
background-position: 30px -10px;