используя фоновое изображение в сетке css

Question

Я пытаюсь использовать фоновое изображение в сетке css, но я не вижу изображения

.firstPage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-template-areas: "homePageImage1 homePageImage2"
}

.homePageImage1 {
  grid-area: homePageImage1;
  background-image: url('https://postimg.cc/F12QYFjW');
  width: 700px;
  height: 962px;
}

.homePageImage2 {
  grid-area: homePageImage2;
  background-image: url("https://postimg.cc/LJQDs5Ph");
  width: 666px;
  height: 962px;  
}

<div class="firstPage" style="width: 1366px;">
  <div class="homePageImage1">
  </div>
  <div class="homePageImage2">
  </div>
</div>

Вот скрипка: https://jsfiddle.net/flamant/09csye6f/40/

Answer 1

Вы должны использовать URL изображения, а не сайт, например https://i.postimg.cc/gk0cBnrW/home-Page-Image1.png вместо https://postimg.cc/F12QYFjW

РЕДАКТИРОВАТЬ : После проверки ваших файлов проблема заключалась в том, что url не находил относительные локальные пути к изображениям, поскольку вы специально указали base один в верхней части головы. Итак, решение состоит в том, чтобы просто удалить <base href="/">. Вы можете прочитать больше об этом здесь .

Answer 2

Пожалуйста, найдите ссылки на файлы. Я использовал Google Drive, чтобы поделиться файлами. Вам нужно будет подправить файл html для использования фонового изображения url

drive.google.com / open? Id = 1GrsZaWr6cO5gXyZ8JyZG6-rieGDN5Iz0 drive.google.com/open?id=1HrdR1kC3kFpqhlXYP06VX0P0. google.com/open?id=1nCoTuuHnBqEzNeRvhBivfsnCXBWfL0XS drive.google.com/open?id=13BRtpbteMzUokRe5cPGhIfjokzyDfGDh drive.google.com/open?id=18BvGvgaib5U2MbTphNae7pKWzN1uyaAx drive.google.com/open?id=1Mazw9CQ97JgOW5ZTqXYSU1FGVHm8ndYs

Answer 3

Вы должны добавить адрес изображения следующим образом:

.firstPage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-template-areas: "homePageImage1 homePageImage2"
}

.homePageImage1 {
  grid-area: homePageImage1;
  background-image: url('https://i.postimg.cc/gk0cBnrW/home-Page-Image1.png');
  width: 700px;
  height: 962px;
}

.homePageImage2 {
  grid-area: homePageImage2;
  background-image: url("https://i.postimg.cc/d0wx4TtR/home-Page-Image2.png");
  width: 666px;
  height: 962px;  
}

<div class="firstPage" style="width: 1366px;">
  <div class="homePageImage1">
  </div>
  <div class="homePageImage2">
  </div>
</div>