0

Имеется примерно такой фон: пример Каким образом его можно добавить на страницу что-бы фон был посередине,надпись "Something" при приближении оставалась на середине и при этом всём поверх замутнённого фона с городом можно было добавлять элементы?

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

    body{
    max-width: 1900px;
    height:100%;
    background-color: #fff5ed;
    margin:0 auto;

}

    #image{
    width:100%;
    height:1166px;
    background-image:url(img/Background.png);
    background-repeat:no-repeat;
    margin:0 auto;

}

Вариант когда на задний фон body прилепил и изображение и задний фон,но сразу было ясно что это всё будет позиционировать слева:

    body{
width:100%;
max-width: 1900px;
height:3000px;
background-color: #fff5ed;
background-image:url(img/Background.png);
background-repeat:no-repeat;
margin:0 auto;

} В этом варианте при изменении ширины с процентов на фиксированные пиксели,появляется горизонтальная линия при приближении.

2
  • Покажите код, как вы пробовали! 30 янв 2016 в 14:02
  • P.S.: не нужно прописывать фиксированную высоту и ширину body (также как и максимальные значения), иначе получите полосы прокрутки при различных размерах окна. margin: 0 auto также бессмысленно для body.
    – Misandra
    3 фев 2016 в 13:40

1 ответ 1

1

Нужно прописать позиционирование фона:

background-position: center top;

Первый аргумент - позиционирование по горизонтали, второй - по вертикали.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.