How can I get a background-image to be spanned over a grid-layout

Question

I have a grid layout of, let's say 2 rows, 2 columns in the 1st row, 3 columns in the 2nd row. And a grid gap of 10px between them. It is no problem to give every single grid a background-image. But what if I want them all to have the same background image that starts at the top left grid and continues/is spanned until the bottom right grid. One big background-image over all grids, just separated by the white grid gaps.

html,
body {
  height: 100%;
}
.grid {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
}

.grid_cell_one {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
  background-image: url("https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg");
}

.grid_cell_two {
  grid-column: 4 / span 3;
  grid-row: 1 / span 1;
  background-image: url("https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg");
}

.grid_cell_three {
  grid-column: 1 / span 2;
  grid-row: 2 / span 1;
  background-image: url("https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg");
}

.grid_cell_four {
  grid-column: 3 / span 2;
  grid-row: 2 / span 1;
  background-image: url("https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg");
}

.grid_cell_five {
  grid-column: 5 / span 2;
  grid-row: 2 / span 1;
  background-image: url("https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg");
}

<div class="grid">
  <div class="grid_cell_one">
  </div>
  <div class="grid_cell_two">
  </div>
  <div class="grid_cell_three">
  </div>
  <div class="grid_cell_four">
  </div>
  <div class="grid_cell_five">
  </div>
</div>

https://jsfiddle.net/z059p8sd/1/ ... What I want is one big background image behind, not the same background for every grid cell. But with the grid-gaps still visible. — Patrick3k, Apr 08 '19 at 07:34

Temani Afif · Accepted Answer · 2019-04-08T08:32:15.000

On idea is to consider background-attachement:fixed but the background will no more follow the scroll:

html,
body {
  height: 100%;
  margin:0;
}

.grid {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
}

.grid>* {
  background-image: url("https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.grid_cell_one {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
}

.grid_cell_two {
  grid-column: 4 / span 3;
  grid-row: 1 / span 1;
}

.grid_cell_three {
  grid-column: 1 / span 2;
  grid-row: 2 / span 1;
}

.grid_cell_four {
  grid-column: 3 / span 2;
  grid-row: 2 / span 1;
}

.grid_cell_five {
  grid-column: 5 / span 2;
  grid-row: 2 / span 1;
}

<div class="grid">
  <div class="grid_cell_one">
  </div>
  <div class="grid_cell_two">
  </div>
  <div class="grid_cell_three">
  </div>
  <div class="grid_cell_four">
  </div>
  <div class="grid_cell_five">
  </div>
</div>

Another idea is to consider multiple background on the grid container where you will fill the gap with white color (or any color used in the background).

Added a transparent layer to the grid item to better illustrate

html,
body {
  height: 100%;
  margin:0;
}

.grid {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
  background: 
    /*middle horizontal line*/
    linear-gradient(#fff,#fff) center/100% 10px,
    /*top vertical line*/
    linear-gradient(#fff,#fff) top center/10px 50%,
    /*bottom lines*/
    linear-gradient(#fff,#fff) calc(1*100%/3 - 3px) 100%/10px 50%,
    linear-gradient(#fff,#fff) calc(2*100%/3 + 3px) 100%/10px 50%,
    /*main background*/
    url("https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg") center/cover;
  background-repeat:no-repeat;
}

.grid>* {
  background: rgba(255, 255, 0, 0.2);
  /*to illustrate*/
}

.grid_cell_one {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
}

.grid_cell_two {
  grid-column: 4 / span 3;
  grid-row: 1 / span 1;
}

.grid_cell_three {
  grid-column: 1 / span 2;
  grid-row: 2 / span 1;
}

.grid_cell_four {
  grid-column: 3 / span 2;
  grid-row: 2 / span 1;
}

.grid_cell_five {
  grid-column: 5 / span 2;
  grid-row: 2 / span 1;
}

<div class="grid">
  <div class="grid_cell_one">
  </div>
  <div class="grid_cell_two">
  </div>
  <div class="grid_cell_three">
  </div>
  <div class="grid_cell_four">
  </div>
  <div class="grid_cell_five">
  </div>
</div>

You can check this link for more details about the different value used: Using percentage values with background-position on a linear gradient

Hi Temani Afif, Option A was all I needed, background-attachment: fixed did the trick. As we use it to show corporate data on welcome screens, scrolling isn't required. Tanks a lot man! — Patrick3k, Apr 08 '19 at 08:37
Just curious, how `background-attachement:fixed` spans the image over entire container? Can anyone please explain? — Abhinandan Khilari, May 18 '20 at 05:22
@AbhinandanKhilari background-attachment:fixed will make the reference for the background to be the screen so you don't have one image but each item has its own background and since all of them will have the same reference they will create a continuous one — Temani Afif, May 18 '20 at 10:33
@Termani thanks, that means background-attachment:fixed works in similar way as in position:fixed, making screen as a reference point, right? — Abhinandan Khilari, May 18 '20 at 11:01
@AbhinandanKhilari yes exactly, by the way the code can also be modified to use pseudo element for each element and make them position:fixed and we get the same effect. — Temani Afif, May 18 '20 at 11:03

score -2 · Answer 2 · answered Apr 08 '19 at 06:35

-2

Make your Grid-Background transparent and set the background-image of the parent to the desired one.

LG RT

answered Apr 08 '19 at 06:35

RedTek

25
1
3

Hi RedTek, and thanks for your help. If I'm doing it this way https://jsfiddle.net/z059p8sd/2/ I got this bis background image behind, but I won't see my grid-gaps anymore. I want this to look a bit like a photo album, but with one single photo spanned across. So the grid-gaps should still be visible and white. Is there any other way to achieve this than using a grid layout maybe? – Patrick3k Apr 08 '19 at 07:39

How can I get a background-image to be spanned over a grid-layout

2 Answers2

Linked