Изменение размера и изменение фонового изображения в папке / нижней части страницы

Question

Я пытаюсь создать страницу, где изображение (фруктов) будет фоновым изображением для папки / нижней части пространства страницы. Он должен варьироваться от начала до конца (ширина составляет 100%, а высота - около 30%). Как я мог заставить это работать? Вот мой код:

Проблема в том, что изображение фруктов остается гигантским, хотя его высота должна составлять только 30% от обзора, а ширина - не 100%.

Ниже приведен стиль. css -файл. Я попытался отредактировать изображение, используя этот файл.

h1{

}

#h1{
    color:blue;
    padding-bottom:30px;
    font-family: CelebriSans;
}

h2{
    font-family: CelebriSans;
    margin-top:10px;
}

.navbar{
background-color:#c99ab1 !important;
height:11%;
}

.main{
    height:60%;
    width:100%;
}

p{
font-family: CelebriSans;
font-size:16px; 
font-style:bold;
}

.footer{
    margin-top:20px;
    width:100%;
    height:30%;

}

.footer .img-fluid{
    margin-top:20px;
    width:100%;
    height:30%; 
}

Answer 1

Присвойте изображению идентификатор

<div class="footer">
          <img src="https://cdn.pixabay.com/photo/2017/06/21/21/33/fruit-2428678__480.jpg" class ="img-fluid" alt="Responsive image" id="test-img">
        </div>

И тогда в вашем CSS вы сможете изменить его свойства так, как вы хотите, например:

#test-img {
  height: 300px;
}

Он также не заполнен ширина, потому что, когда я проверяю вашу страницу, она показывает

body {
    display: block;
    margin: 8px;
}

, что создает поле вокруг вашей страницы