фоновое изображение не отображается - PullRequest
Новая
       51

фоновое изображение не отображается

0 голосов
/ 10 июля 2019

Я пытаюсь отобразить фоновое изображение в моем CSS и использовал относительный путь к изображению.Я пытался использовать разные браузеры, но ничего не работаетНиже приведен мой HTML. 

<header>
  <h2><a href="#">Rachel Doyle Studio</a></h2>
  <nav>
    <li><a href="#">Home</a></li>
    <li><a href="#">Embroidery</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </nav>
</header>
<section class="thimble">
  <div class="background-image" style="background-image: url(assets/img/art-arts-and-crafts-bright-colours-2564890.jpg)"></div>

  <div class="thimble-content-area">
    <h1>Rachel Doyles Studio</h1>
  </div>
</section>

, а ниже - стили CSS для класса background-image. 

.thimble background-image {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
}

Я приложил изображение структуры моих файлов.structure of project

Почему это происходит, хотя у меня правильный путь к jpeg.

Ответы [ 3 ]

1 голос
/ 10 июля 2019

Вам не хватает точки перед background-image Имя класса: 

.thimble .background-image {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
}
0 голосов
/ 10 июля 2019

Исходя из приведенного кода, я не думаю, что вам нужен отдельный div для фонового изображения. Вам не нужно позиционировать его, если вы поместите фоновое изображение непосредственно на .thimble: 

.thimble {
  background-size: cover;
}

<section class="thimble" style="background-image: url(assets/img/art-arts-and-crafts-bright-colours-2564890.jpg)">
  <div class="thimble-content-area">
    <h1>Rachel Doyles Studio</h1>
  </div>
</section>
0 голосов
/ 10 июля 2019

Я думаю, вам нужно добавить .. / к указанному вами пути

<div class="background-image" style="background-image: url(../assets/img/art-arts-and-crafts-bright-colours-2564890.jpg)"></div>

Это должно сработать сейчас ..

...