Как я могу получить фоновое изображение, которое будет охватывать сетку
У меня есть сетка, скажем, 2 строки, 2 столбца в 1-й строке, 3 столбца во 2-й строке. И зазор сетки 10px между ними. Не проблема дать каждой отдельной сетке фоновое изображение. Но что, если я хочу, чтобы все они имели одно и то же фоновое изображение, которое начинается в верхней левой сетке и продолжается/растягивается до нижней правой сетки. Одно большое фоновое изображение поверх всех сеток, просто разделенное белыми промежутками сетки.
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>
Ответы 2
Сделайте свой Grid-Background прозрачным и установите фоновое изображение родителя на желаемое.
LG РТ
Привет RedTek, и спасибо за вашу помощь. Если я сделаю это таким образом, jsfiddle.net/z059p8sd/2, у меня останется фоновое изображение bis, но я больше не увижу пробелы в сетке. Я хочу, чтобы это выглядело как фотоальбом, но с одной единственной фотографией. Таким образом, пробелы сетки все еще должны быть видимыми и белыми. Есть ли другой способ добиться этого, кроме использования сетки?
По идее нужно учитывать background-attachement:fixed но фон больше не будет следовать за прокруткой:
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>Другая идея состоит в том, чтобы рассмотреть несколько фонов в контейнере сетки, где вы заполните пробел белым цветом (или любым цветом, используемым в качестве фона).
Добавлен прозрачный слой к элементу сетки, чтобы лучше проиллюстрировать
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>Вы можете проверить эту ссылку для получения более подробной информации о другом используемом значении: Использование процентных значений с фоновым положением на линейном градиенте
Привет, Темани Афиф, вариант А - это все, что мне было нужно, background-attachment: fix сделал свое дело. Поскольку мы используем его для отображения корпоративных данных на экранах приветствия, прокрутка не требуется. Танков много мужик!
Просто любопытно, как background-attachement:fixed охватывает изображение по всему контейнеру? Кто-нибудь может объяснить?
@AbhinandanKhilari background-attachment:fixed сделает ссылку на фон экраном, поэтому у вас не будет одного изображения, но у каждого элемента будет свой собственный фон, и, поскольку все они будут иметь одинаковую ссылку, они создадут непрерывную.
@Termani спасибо, это означает, что background-attachment:fixed работает так же, как и position:fixed, делая экран ориентиром, верно?
@AbhinandanKhilari да, точно, кстати, код также можно изменить, чтобы использовать псевдоэлемент для каждого элемента и сделать их положение: фиксированным, и мы получим тот же эффект.