using background image in css grid

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/

you are not using links for images but links for web pages showing the images: postimg.cc/F12QYFjW — Temani Afif
– Temani Afif, Commented Apr 9, 2020 at 9:46

Majed Badawi · Accepted Answer · 2020-04-10 11:41:48Z

2

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.

edited Apr 10, 2020 at 11:41

answered Apr 9, 2020 at 9:47

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

flamant Over a year ago

Sorry, I updated the fiddle and it works, but the html file on my browser does not show the images

Majed Badawi Over a year ago

I tried it locally in a .html file and it worked. Make sure that nothing else in your file is hiding the images.

flamant Over a year ago

I can see the image when I click on it in firebug, I changed the image, I checked the permission of the file, but nothing works

Majed Badawi Over a year ago

Attach the whole code in the question or link the file, in order for me to test it.

flamant Over a year ago

A thousand excuses Majed, you found the solution. Thanks a lot

|

nourza · Accepted Answer · 2020-04-09 09:50:39Z

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>

Sorry, I updated the fiddle and it works, but the html file on my browser does not show the images

Collectives™ on Stack Overflow

using background image in css grid

2 Answers 2

8 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Related