Почему стиль изображения блокирует другое изображение? - PullRequest
Новая
       26

Почему стиль изображения блокирует другое изображение?

0 голосов
/ 07 ноября 2018

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

Таким образом, .home-image показывает, но стиль для него блокируется, когда появляется background-image для #wrapper.

Любые предложения приветствуются. 

.feature-review-border {
  max-width: 500px;
  padding: 7px;
  background-color: #d83c12;
  margin: 15px auto;
  border-radius: 9px;
}

.feature-review-holder1 {
  width: 500px;
  height: 380px;
  background-color: #f4b183;
  margin: auto;
  border-radius: 9px;
  text-align: center;
}

.home-image {
  height: 250px;
  width: 400px;
}

#wrapper {
  background-image: url(images/tire.png);
}
<body>
  <div id="wrapper">
    <header>
      <h1 class="text-format">Car Reviewer</h1>
    </header>

    <nav class="text-format">
      <ul>
        <li> <a href="index.html">Home</a> </li>
        <li> <a href="reviews.html">Reviews</a> </li>
        <li> <a href="about.html">About</a> </li>
      </ul>
    </nav>

    <main>
      <h2 class="text-format">Featured Reviews</h2>

      <!-- MAKING OF THE FEATURED REVIEWS IMAGES -->
      <!-- BORDER OF FEATURED REVIEWS ON HOME PAGE -->
      <div class="feature-review-border">

        <figure>
          <!-- IMAGE CONTAINER -->
          <div class="feature-review-holder1">
            <img src="images/f150.png" alt="Ford F-150" class="home-image">

            <figcaption>"The hands free options are easy to use and I use the bluetooth connectivity to play music and make phone calls" - Bob
            </figcaption>
          </div>
          <!-- END 'FEATURE-REVIEW-HOLDER' -->

        </figure>

      </div>

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

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

Просматривая свой код сегодня, я заметил это и удивился, почему он там был. Я удалил его, сохранил страницу, а затем обновил Chrome. Бум, мое фоновое изображение появилось.

Извините за всю лишнюю работу, которую я вам причинил. Определенно урок, который я должен был выучить.

Спасибо всем за помощь.

UPDATE:

Я заново создал код с ошибкой, чтобы показать 

    /* CAPTION OF IMAGE */
figcaption  {
font-family:calibri;
font-weight:bold;
font-style:italic;
font-size:26px;
padding:0px 15px;

}

} это следует удалить 

#wrapper    {
background-image:url(images/tire.png);

}

0 голосов
/ 07 ноября 2018

Я предполагаю, что ваш путь к изображению не правильный. Попробуйте использовать относительный путь, например: 

#wrapper    {
   background-image:url(./images/tire.png);
}

Вот также рабочий пример с фиктивным изображением: 

.feature-review-border  {
  max-width:500px;
  padding:7px;
  background-color:#d83c12;
  margin:15px auto;
  border-radius:9px;
}

.feature-review-holder1 {
  width:500px;
  height:380px;
  background-color:#f4b183;
  margin:auto;
  border-radius:9px;
  text-align:center;
}

.home-image {
  height:250px;
  width:400px;
}

#wrapper    {
  background-image:url(https://via.placeholder.com/1000);
}
<div id="wrapper">
    <header>
        <h1 class="text-format">Car Reviewer</h1>
    </header>
    <nav class="text-format">
        <ul>
            <li> <a href="index.html">Home</a> </li>
            <li> <a href="reviews.html">Reviews</a> </li>
            <li> <a href="about.html">About</a> </li>
        </ul>
    </nav>
    <main>
        <h2 class="text-format">Featured Reviews</h2>
        <div class="feature-review-border">
            <figure>
                <!-- IMAGE CONTAINER -->
                <div class="feature-review-holder1">
                    <img src="images/f150.png" alt="Ford F-150" class="home-image">

                    <figcaption>"The hands free options are easy to use and I use the bluetooth connectivity to play music and make phone calls" - Bob
                    </figcaption>
                </div>
            </figure>
        </div>
    </main>
</div>
...