CODEWITHSUNDEEP
css
flamant
flamant

Reputation: 783

using background image in css grid

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/

Upvotes: 1

Views: 139

Answers (2)

Majed Badawi
Majed Badawi

Reputation: 28434

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.

Upvotes: 2

nourza
nourza

Reputation: 2321

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>

Upvotes: 0

Related Questions