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

I am working on my webpage. I am facing couple of problems at the moment:

  • Изображения не адаптируются к размеру окна браузера, если я уменьшу окно браузера, изображение будет отображаться как повторяющееся
  • Я хочу, чтобы каждая картинка занимала весь дисплей
  • Как я могу сделать так, чтобы нижний колонтитул и меню оставались видимыми во время прокрутки?
    • Here is the link to 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%;
}

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


    css responsive webpage
    person Nastja Kr    schedule 04.04.2016    source источник
    comment
    Причина, по которой вы видите двойное фоновое изображение, заключается в том, что у вас установлено свойство background-size: 100%. Это переопределяет свойство background-size: cover, которое вам действительно нужно. Удалите background-size: 100%, и все будет хорошо. Если вы хотите, чтобы нижний колонтитул и верхний колонтитул оставались в фиксированном положении, попробуйте установить для них значение position: fixed.   -  person jered    schedule 04.04.2016
    comment
    Это хорошая практика, чтобы упомянуть, что вы пробовали ранее. Вопрос немного широк, и есть похожие вопросы, такие как это, это и это.   -  person alljamin    schedule 04.04.2016

    Ответы (2)


    arrow_upward
    0
    arrow_downward

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

    person I wrestled a bear once.    schedule 04.04.2016
    comment
    Спасибо. Я так и сделал, но проблема в маленьком отображении, в этом случае у меня пробелы между картинками - person Nastja Kr; 04.04.2016
    comment
    вы можете попробовать содержать вместо покрытия. - person I wrestled a bear once.; 04.04.2016

    arrow_upward
    -1
    arrow_downward

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

    background-repeat: no-repeat;

    чтобы каждое изображение не отображалось более одного раза.

    person Daniel Diekmeier    schedule 04.04.2016