Не могу понять, почему мое фоновое изображение не отображается
Я пытаюсь отобразить фоновое изображение в .hero, что означает, что изображение будет в центре страницы, но изображение вообще не отображается. В «devtools» рядом с изображением отображается предупреждающий знак.
Я попытался поместить изображение в тело и исключить абсолютную позицию, которую я указал в CSS; однако это не повлияло на результаты. Пожалуйста, помогите. Я думал, что абсолютная позиция может подтолкнуть другие элементы, такие как класс .hero, у которого есть фоновое изображение. Я также пробовал писать несколькими способами и с '', и с двумя точками, и даже с одной точкой.
.hero {
background-image: url("https://picsum.photos/100/100") center center/cover
no-repeat;
margin-top: 8rem;
padding: 11.5rem 2rem 8rem;
position: relative;
overflow-x: hidden;
}<header class = "hero">
<div class = "container-heroflex">
<div class = "hero-content">
<h1>Create your own video courses</h1>
<p>
dive deep into the world of creativity and learn to craft stunning
videos that captivate your audience
</p>
<a href = "#" class = "btn">29$ Get Course</a>
</div>
<div class = "hero-img">
<img src = "https://picsum.photos/300/300" alt = "header-course" />
</div>
</div>
</header>как я могу проверить, что говорит ошибка
background-image: должно быть просто background: (сокращение). Значения кажутся в хорошем порядке определения. Если это по-прежнему не работает, сохраните эти изменения и попробуйте дополнительно исправить путь. (Нажмите клавишу F12 (чтобы открыть инструменты разработки) и посмотрите на вкладке «Консоль» или «Сеть», есть ли какие-либо ошибки при получении изображения)
в сети не показывает, что есть ошибки, это так странно
Ответы 3
Вам необходимо разделить фоновое изображение на положение, размер и повторить его в другой строке.
.hero {
background-image: url('../images/header-background.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-top: 8rem;
padding: 11.5rem 2rem 8rem;
position: relative;
overflow-x: hidden;
}
Не обязательно. Проще всего было бы использовать background: (вместо background-image:) для обозначения всех доступных значений (которые, кстати, кажутся в правильном порядке) – но это хорошо заметно!
Нет, это не проблема, это может быть сокращение
Цитата из Фоновой документации CSS
Сокращенное свойство CSS
backgroundзадает сразу все свойства стиля фона, такие как цвет, изображение, начало координат и размер или метод повтора. Свойства компонента, не заданные в объявлении значения фонового сокращенного свойства, устанавливаются в значения по умолчанию.
Просто используйте свойство background вместо background-image следующим образом:
.hero {
background: url('https://m-sarabi.ir/assets/personal-header.jpg') center center/cover no-repeat;
margin-top: 8rem;
padding: 11.5rem 2rem 8rem;
position: relative;
overflow-x: hidden;
}<header class = "hero">
<div class = "container-heroflex">
<div class = "hero-content">
<h1>Create your own video courses</h1>
<p>dive deep into the world of creativity and learn to craft stunning videos that captivate your audience
</p>
<a href = "#" class = "btn">29$ Get Course</a>
</div>
</div>
</header>да! большое спасибо
очень странно, что когда я добавляю фоновое изображение, оно не отображается, но отображается только фоновое значение..
Это потому, что background-image предназначен для приема изображения (как следует из названия), а не полного background сокращенного варианта.
@shirshamay Это потому, что background — это сокращение для всех свойств стиля фона. Вы использовали background-image и при этом установили для него несколько свойств фона, как показано в ответе @foysal-kabir-shimul.
Вы можете попробовать использовать этот код:
.hero {
background: url('../images/header-background.jpg') center center / cover no-repeat;
margin-top: 8rem;
padding: 11.5rem 2rem 8rem;
position: relative;
overflow-x: hidden;
}
Надеюсь, это вам поможет.
«В devtools рядом с изображением отображается предупреждающий знак», и что говорит ошибка? Путь к изображению правильный?