using background image in css grid - css

Question

I try to use background image within css grid, but I cannot see the images
.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>
here is the fiddle: https://jsfiddle.net/flamant/09csye6f/40/

Answer 1

You should use the url of the image not the site, for example https://i.postimg.cc/gk0cBnrW/home-Page-Image1.png instead of https://postimg.cc/F12QYFjW
EDIT:
After checking your files, the problem was that the url was not finding the relative local paths of the images since you specifically specified a base one in the top of your head. So, the solution is to simply remove <base href="/">. You can read more about this here.

Answer 2

You have to add the image address like this:
.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>