отзывчивое фоновое изображение без изменения размера

Question

Мой колледж попросил меня закодировать сайт для проекта, но сделать его отзывчивым. Изображение, которое я использую для фона заголовка, не изменяется. Это код HTML

<div id="headerbackground"></div> 

И для стиля я поместил

#headerbackground { 
background-image: url('../images/header.png'); 
background-size: contain; 
max-width:100%; 
max-height: 100%; 
} 

Я следовал несколько учебников, но не повезло

Answer 1

Вы не можете установить пустой фон Див, пока вы не установите высоту на этом. Или у вас есть контент внутри этого div. Поэтому вам нужно установить высоту div. Итак, вот ваше отзывчивое фоновое изображение. Вы можете проверить отзывчивость, изменяя размер окна.

body { 
 

 
    margin: 0; 
 
} 
 

 
#headerbackground { 
 
    background: url('http://farm3.static.flickr.com/2098/2260149771_00cb406fd6_o.jpg'); 
 
    background-size:100% 100%; 
 
    background-repeat: no-repeat; 
 
    height: 100vh; 
 
}

<div id="headerbackground"></div>

Answer 2

Во-первых, вы не указана минимальная высота, только максимальная, поэтому она сворачивается на 0.

Во-вторых, вы, вероятно, захотите использовать background-size:cover; - это изменяет размер изображения до обложка весь элемент. Содержит Изменяет размер изображения так, что все это только подходит к элемент.

html, 
 
body { 
 
    height: 100%; 
 
} 
 
#headerbackground { 
 
    background-image: url('https://placekitten.com/g/800/600'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    max-width: 100%; 
 
    min-height: 100%; 
 
}

<div id="headerbackground"></div>