HTML&CSS Не отображается картинка фона в div

Question

Скачал, создал проект и столкнулся с проблемой: у меня в коде есть див с классом header и ему нужно задать фон. Я сделал все, как показывали в курсах, но результата нет. Облазил много сайтов, но решение не нашел.

Интересно, что если в CSS файле вместо .header вписать body - все работает.

Вот код.

/*Simple CSS reset*/

* {
  margin: 0;
  padding: 0;
}

.header {
  background-image: url('img/bg.jpg');
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./style.css">
  <title>Coefficient</title>
</head>

<body>
  <div class="header"> 
  </div>
</body>

</html>

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <title>Coefficient</title>
</head>

<body>
    <div class="header">
    </div>
</body>
</html>

CSS

/*Simple CSS reset*/
* {
    margin: 0;
    padding: 0;
}

.header{
    background-image: url('img/bg.jpg');
}

Answer 1

У вас div пустой. Попробуйте так:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./style.css">
  <title>Coefficient</title>
</head>

<body>
  <div class="header">
    <p> vvvvvv </p>
  </div>
</body>

</html>

Answer 2

Дело в том, что высота header по-умолчанию равна 0, поэтому вы и не видите картинку. Чтобы исправить эту "проблему", добавьте в блок немного контента - текста или явно укажите высоту

.header {
  min-height: 100px;
  background-image: url("img/bg.jpg");
}

БЛОГ НА HUSL

HTML&CSS Не отображается картинка фона в div

Ответы (2 шт):