Фоновое изображение не отображается, если указано в CSS - PullRequest
Новая
       5

Фоновое изображение не отображается, если указано в CSS

0 голосов
/ 08 февраля 2020

Проблема

Я пытаюсь установить фоновое изображение div в CSS, но оно не работает.

Код 

.img-background {
    background-image: url('Portfolio5.jpg');
    height:100%;
    width: 100%;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My Site</title>
        <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="style1.css">
    </head>
    <body>
        <div class="img-background"></div>
    </body>
</html>

Ответы [ 2 ]

2 голосов
/ 08 февраля 2020

Это не работает, потому что вы используете height:100%

, например: 

.bg-img {
    width: 100%;

    height: 100vh;

    background: url('./img.png') no-repeat center;
    background-size: cover;
}

Редактировать: vh обозначает Высота области просмотра (vh) и означает, что высота родительского элемента равна 100%. background-image для отображения содержимого требуется определенная высота и ширина, поэтому тег без внутреннего html не отображает его содержимое.

0 голосов
/ 08 февраля 2020

jsfiddle

В вашем классе .image-background вы устанавливаете высоту как 100%; это приведет к тому, что он станет на 100% высотой родительского элемента, которым является тело. Однако для тела не указана высота, поэтому по умолчанию оно равно 0, и в результате ваше изображение не отображается. Чтобы решить эту проблему, вам нужно установить высоту html и body на 100%. 

html, body {
    height: 100%;
    margin: 0;
}

margin был установлен на 0, чтобы избежать body переполнен.

...