Фон не появляется в div - PullRequest
Новая
       34

Фон не появляется в div

0 голосов
/ 04 декабря 2018

Я пытаюсь добавить изображение баннера и настроить его размер с помощью CSS.ИЗОБРАЖЕНИЕ и CSS находятся в одной папке рядом друг с другом.

HTML 

<body>
<header>

    <div class="banner"></div>

CSS 

div.banner {
background: url("games_header.jpg") no-repeat fixed center;
background-size: contain;
display: block;
margin: auto;
max-width: 100%;
height: 25%;

}

Ответы [ 3 ]

0 голосов
/ 04 декабря 2018

Я поместил все это в HTML-файл, который я создал, и это работает для моего изображения, которое находится в том же каталоге.Вам не нужно называть его как div.banner, достаточно добавить класс в div, чтобы просто назвать его так, как вы его называете.

    <head>

    <style>
        .banner{
            height: 100%;
            background-image: url('./butterbot.jpg');
            background-repeat: no-repeat;
        }
    </style>


</head>
<body>
    <header>
        <div class="banner"></div>
    </header>
</body>
0 голосов
/ 04 декабря 2018

background является встроенным атрибутом и будет работать с корневыми элементами, такими как атрибуты html или body, если вы установите стиль фона на <body> (просто пример).Хотя не рекомендуется использовать его на html и body, но в фиксированной позиции div с шириной и высотой 100%, как показано ниже 

.banner {
  background: url("https://picsum.photos/200") no-repeat fixed center;
  position: fixed;
  height: 100%;
  width: 100%;
}
<div class="banner"></div>
0 голосов
/ 04 декабря 2018

В этом элементе нет содержимого, поэтому его высота равна 0 => нет видимого фона.Просто добавьте контент, и фон появится.

Настройка height не действует, если родительский элемент не имеет заданной высоты.Если вы хотите, чтобы баннер занимал 25% высоты окна, добавьте это правило: 

html, body {
  height: 100%;
}
...