CSS-фоновое изображение не отображается поверх другого - PullRequest
Новая
       20

CSS-фоновое изображение не отображается поверх другого

0 голосов
/ 14 сентября 2018

На самом деле, я должен поместить фоновое изображение поверх другого, например так:

Ожидаемый результат:
enter image description here

Я добавил 1-йфоновое изображение для body и другое в качестве фона для inner-body -класса.Фоновое изображение body отображается правильно, но второе фоновое изображение вообще не отображается.

Проверьте код проверяющего элемента, прикрепленный ниже:

изображение тела в процессе работы (код):
enter image description here

2-ое изображение "внутреннее тело" изображение не отображается (код):
enter image description here

Но если я укажу высоту для inner-body (например, 600 пикселей), изображение будет показано, но это не правильный путь, потому что в адаптивном режиме это будет плохо.

Что я делаю не так?

Мой код: 

<html>
<head>
    <title>Login</title>
    <style type="text/css">
        body {
            background: url("bg-image1.jpg");
            background-size: cover;
            background-repeat: no-repeat;
        }

        .inner-body {
            background: url("bg-image2.jpg");
            background-size: auto;
            /*height: 687px;*/
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="inner-body">
            <div class="form-body"> </div>
        </div>
    </div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018

Это потому, что в вашем div-элементе внутри тела нет содержимого, вы должны добавить в него какой-то контент, тогда он примет автоматическую высоту, или вы должны задать высоту этому div.Думаю, нет другого пути.

0 голосов
/ 14 сентября 2018

Присвойте этот стиль html, body и container:

CSS 

html, body, .container {
   min-height: 100%;
}

body {
   padding: 200px;
}

.inner-body {
   max-height:80%;
}
...