PSD нарезанный фон с изображением

Question

У меня есть PSD-дизайн для моего сайта, и у меня проблемы с кодированием основного баннера. Это page

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

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

Есть ли более простой способ сделать это?

Спасибо!

Answer 1

Причина, почему он показывает должным образом в определенном разрешении экрана, потому что ваш размер изображения 1550x417, и вы с помощью CSS позиции фона свойство, чтобы установить его на 1300px 400px. Это не очень отзывчивый способ установки фоновой позиции, и он может варьироваться от экрана к экрану.

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

фрагмент: http://i.imgur.com/2s35JYs.png

Пример: фон: URL ('../ изображений/banner2.jpg') центр центр не повторять # ECE8DF;

Answer 2

вы должны добавить «центр 0» в стиль фона.

#banner { 
background: url("../images/banner2.jpg") no-repeat center 0; 
background-color: #e8e4da; 
height: 400px; 
padding: 0; 
background-size: 1300px 400px; 
border-bottom: 2px solid #fff; 
}