Я использую текстовый редактор Atom в MacOS. Веб-браузер Google chrome и не заметил никаких сложностей, кроме этого. Если используется in html, мое изображение отображается на веб-странице, но когда я создаю отдельный div и пытаюсь назначить изображение через CSS, используя background: url (url-изображение). мое изображение находится в той же папке, что и мой html файл и мой css файл. но это просто не появляется. Я также проверил наличие ошибок орфографии.
HTML
<div class="container">
<p>
L
</p>
</div>
<header>
<h1>Parallax Effect</h1>
</header>
CSS
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family: "Monument Extended", Arial, Helvetica, sans-serif;
}
body {
color: white;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
header {
box-sizing: border-box;
min-height: 100vh;
position: relative;
transform-style: inherit;
width: 100vw;
text-align: center;
text-transform: uppercase;
}
header h1 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
header,
header:before {
background: 50% 50% / cover;
}
header::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
background: url(HERO.jpeg);
background-size: cover;
transform-origin: center center 0;
transform: translateZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
.container {
z-index: 2;
position: absolute;
top: 100vh;
background: black;
line-height: 30px;
font-weight: lighter;
padding: 40px;
color: grey;
}