Как я могу сделать свое фоновое изображение отзывчивым

Я работаю над своей веб-страницей. На данный момент у меня есть пара проблем:
Как я могу сделать свое фоновое изображение отзывчивым

Изображения не приспосабливаются к размеру окна браузера, если я сделаю окно браузера меньшим будет отображаться как повторяющееся

Я хочу, чтобы каждое изображение принимало все display

Как я могу сделать этот нижний колонтитул и меню оставаться видимыми во время прокрутки?

Вот ссылка на Codepen

#intro{ 
    background-image: url("http://www.tricentis.com/wp-content/uploads/2015/10/photo-1435575653489-b0873ec954e2.jpg"); 
    padding-top: 30px; 
    background-size: cover; 
    height: 100vh; 
    background-size: 100%; 
}

Заранее спасибо за помощь

источник

2016-04-04 Nastja Kryvoscheya

Причина, по которой вы видите двойное увеличение фонового изображения, заключается в том, что у вас есть свойство 'background-size: 100%'. Это переопределяет свойство 'background-size: cover', которое вы действительно хотите. Удалите «background-size: 100%», и вам должно быть хорошо идти. Если вы хотите, чтобы нижний колонтитул и заголовок сохранялись в фиксированном положении, попробуйте установить их в положение «fixed». – jered

Это хорошая практика, чтобы упомянуть, что вы пробовали ранее. Вопрос немного широк, и есть похожие вопросы, такие как [this] (http://stackoverflow.com/questions/24394168/responsive-images-with-css-html), [this] (http://stackoverflow.com/questions/17762957/responseive-images) и [this] (http://stackoverflow.com/questions/29233558/how-to-set-responsively-images-on-images-to-appear-fixed-using-htmlcssjs) , – alljamin

-1

Вы можете установить

background-repeat: no-repeat;

, чтобы убедиться, что каждое изображение не показывается более чем один раз.

источник

2016-04-04 16:28:10

не подходит для установки размера фона до cover, если вы собираетесь установить его на 100% пару строк вниз. удалите background-size:100% и он отлично работает.

источник

2016-04-04 16:31:02

спасибо. Я сделал это, но проблема в небольшом отображении, в этом случае у меня есть пробел между изображениями –

, которые вы можете попробовать вместо обложки. –

Как я могу сделать свое фоновое изображение отзывчивым

ответ

Смежные вопросы