How Can I Get A Background-image To Be Spanned Over A Grid-layout

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 bac

Solution 1:

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;
}

<divclass="grid"><divclass="grid_cell_one"></div><divclass="grid_cell_two"></div><divclass="grid_cell_three"></div><divclass="grid_cell_four"></div><divclass="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/10px50%,
    /*bottom lines*/linear-gradient(#fff,#fff) calc(1*100%/3 - 3px) 100%/10px50%,
    linear-gradient(#fff,#fff) calc(2*100%/3 + 3px) 100%/10px50%,
    /*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;
}

<divclass="grid"><divclass="grid_cell_one"></div><divclass="grid_cell_two"></div><divclass="grid_cell_three"></div><divclass="grid_cell_four"></div><divclass="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

Solution 2:

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

LG RT