изображение фона повторяется на больших мониторах

Question

Как вы можете видеть на скриншоте фоновое изображение повторяется, когда отображается в большом мониторе:

ли кто-нибудь предложить какой-либо обходной путь для этого?

(и образец CSS-код, если это возможно)

Живой сайт: http://www.carleighmac.org/

Answer 1

Очевидный ответ заключается в использовании:

#featured-area { 
    /* other CSS unchanged */ 
    background-repeat: no-repeat; 
} 

инструмент Web Inspector В настоящее время в Chrome показывает правила фона собственности определены as:

background: url(/themes/sunrise/img/nav/slider-background-baby.jpg) repeat-x top center; 

Если вы замените 'repeat-x на вышеуказанное no-repeat, это будет сокращенная версия вышеизложенного.

Answer 2

Если вы используете фоновое сокращённое свойство, то это будет:

background: url("/themes/sunrise/img/nav/slider-background-baby.jpg") no-repeat center top; 

Детали here.

Answer 3

Вы не хотите, чтобы он повторялся и хотите показать его в полноразмерной (если ваше изображение меньше экрана монитора), вы можете использовать этот css.

Других вариантов здесь http://css-tricks.com/perfect-full-page-background-image/

#yourElementID { 
    float:left; 
    width:100%; 
    height:300px; 
    background: url(images/bg.jpg) no-repeat top center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Answer 4

Если изображение не подходит для отображения, то вам придется повторить его или центрировать его или подгонку (увеличение и кадрирование) его.

1. Для центрирования его довольно легко сделать только с CSS. Используйте опцию non-repeat, как указано в других ответах. Но, на мой взгляд, это может показаться немного уродливым.
2. Для повторения вы уже имеете его.
3. Теперь, насколько подходит, вы можете обратиться к хорошей статье здесь: http://css-tricks.com/perfect-full-page-background-image/