CSS: Full width Background for new css grid
So I have tow rows and 5 columns but only 3 columns with content. I’m using the dot in the template areas to define a white space. This results in having a 3 column layout with white space on the left and right side. If I place an element in a grid area that has a background color the white space left and right stays white (logically). What I want is a full width background (color) but I’m not really sure how to realise this. One option I have in mind is to have a second grid in the background that has the same columns and rows but not the white spaces and then I can fill it up with color but I think this is not best practice.
Why you can just add background image to grid container and use background-image size and background-position to control it’s alignment? By the way you can add horizontal padding with 10% instead of blank columns.
if I add background-image to #site I can’t specify different backgrounds per row. And if I add it to the row (e.g. to the header) it’s inside the area
Actually you can add multiple backgrounds using background CSS property and position them per every row/column/any area.
3 Answers 3
Best I have found is put the grid inside a container for a certain width to center the content. And have items you need to extend the background give a huge left/right padding, and same margin negative.
Just be sure to give body an overflow-x: hidden;
.container < width:1000px; margin: 0 auto; // >#site < display: grid; grid-template-columns: 10% 1fr 1fr 1fr 10%; grid-template-rows: 100px auto; grid-template-areas: ". header header header ." ". content content sidebar ." >.header < background: red; padding: 0 3000px; margin: 0 -3000px; >body
- You can set one or multiple backgrounds using CSS background color. Also this way you can set gradients and solid color can be imitated using gradients.
- Create grid item with background and manually set grid-row and grid-column with values that you need. This items should have negative z-index to be overlapped by other grid items ( z-index is working even for statically positioned for grid items, the same is true about flex items).
- Absolutely positioned elements of grid container.
It sounds like what you’re looking to do may be best addressed by the upcoming Subgrid feature, arriving in Level 2 of CSS Grid: this will allow outer elements and their children to both be laid out using the same grid.
As of today (Aug 8th, 2019) Subgrid has shipped in Firefox nightly, so will hopefully land in a real release soon (tracked here). Unfortunately, there hasn’t been much movement yet from the Chrome team (please star the issue in the Chrome bug tracker to show your support)
In lieu of Subgrid arriving, what I’ve done is either define the same grid lines inside the container element, or, for the specific case of a full-width background, define a padding on the wrapper element that is equal in size to the width of the «empty» gutters on either side of the page. This is easiest/most reliable if you use vw units, and is fairly straightforward with the use of a variable in SASS or LESS
how to add background image to a grid cell?
I am trying to add background image to a grid cell (a div element) which comes in a display:grid container (a section element) . I am trying background-image: url(«background.png») but it is not working. I don’t know why. I have tried and checked multiple times but of no use. Need some help here Thanks in advance Here is the HTML and CSS Code:
Welcome Navigation Main Content Footer /*Root Elements and Border Box Fix*/ html < height: 100; box-sizing: border-box; >*, *:before, *:after < box-sizing: inherit; >body < font-family: "segoe ui", helvetica; margin: 0; >#the-grid < display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(6, 1fr); grid-template-areas: "header header header header header" "nav main main main main" "nav main main main main" "nav main main main main" "nav main main main main" "footer footer footer footer footer"; >/* Grid Cells */ #header < background-image: url("nav.png"); grid-area: header; text-align: center; >#nav < grid-area: nav; >#main < grid-area: main; >#footer 2 Answers 2
Set a fallback color, So if your background image is not accessible/url is wrong then the call back color will automatically display as the background. this is also good if browser doesn’t support the background-image or url it will automatically assign the fallback color as background-color. as I shows in the code and check the CSS parts #header, #nav, #main.
/*Root Elements and Border Box Fix*/ html < height: 100; box-sizing: border-box; >*, *:before, *:after < box-sizing: inherit; >body < font-family: "segoe ui", helvetica; margin: 0; >#the-grid < display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(6, 1fr); grid-template-areas: "header header header header header" "nav main main main main" "nav main main main main" "nav main main main main" "nav main main main main" "footer footer footer footer footer"; >/* Grid Cells */ #header < background: url("nav.png") green; grid-area: header; text-align: center; >#nav < grid-area: nav; background: url("https://pure.wallpapergk.com/download/smiley_curly_hair_blue_eyes_cute_girl_in_blur_background_wearing_yellow_dress_cute.jpg") yellow; background-repeat: no-repeat; background-size: cover; >#main < grid-area: main; background: url("https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero.jpg") blue; color:white; >#footer Welcome Navigation Main Content Footer Background-Image behind Header Section with CSS Grid
i’m trying to recreate this template through the use of Grid. I can’t figure how to create the background-image behind what i’ve already created in my markup. Image what i’m after refrence image any tips? check my website, what have i already done, i thought to use z-indexing, but it didn’t worked.. also if i apply it to the body, it will stretch with the additional content after the header section.
* < box-sizing: border-box; margin: 0; padding: 0; list-style: none; text-decoration: none; font-family: 'Montserrat', sans-serif, arial; >a < color: black; >body < background-color: red; margin: 0 auto; width: 80%; >/* .background-image < background-image: url(../img/bgheader.jpg); background-repeat: no-repeat; background-size: cover; grid-column: 1 / -1; grid-row: 1 / 4; >*/ #grid-container < display: grid; grid-template-columns: repeat(12,1fr); grid-gap: 1rem; >header < grid-column: 1 / 13; display: grid; grid-template-columns: 1fr 11fr; grid-template-rows: 1fr 10fr 1fr 4fr; margin-top: 5rem; >header ul < display: flex; justify-content: flex-end; >header ul li:nth-child(-n+3) < margin-right: 3rem; >header ul a < text-transform: uppercase; font-weight: 400; color: white; >header a:hover < color: grey; >.slogan < grid-row: 2 / 3; grid-column: 1 / 3; justify-self: center; align-self: center; text-align: center; >.slogan h1 < font-size: 2.5rem; color: white; margin-bottom: 1rem; text-transform: uppercase; >.more < color: white; >.services < color: #4a4747; grid-row: 4 / 5; grid-column: 1 / 3; justify-self: center; align-self: center; text-align: center; padding: 0 20rem; >.services h2
Always a step ahead go pro
Learn more..We provide the best services
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia voluptatum blanditiis expedita ducimus fugit rem, qui repellat, quos totam ipsa reprehenderit eum laboriosam maiores. Eum fugit provident error velit soluta, praesentium enim dolorum architecto, quis quisquam magnam! Sequi voluptas consequatur dolor asperiores rem eaque voluptatem necessitatibus laborum alias, omnis atque.
Пример верстки фотогалереи на CSS Grid #1
После цикла уроков по CSS Grid, пришло время подкрепить полученные знания на верстке реального макета. Мы не будем разбирать все свойства связанные с оформлением, а сфокусируемся именно на верстке одной секции по грид технологии. Как правило начинающие верстальщики легко справляются с CSS свойствами, отвечающими за красоту. Зато испытывают трудности с размещением элементов на сайте и с адаптивностью их под разные разрешения.
Делать верстку нестандартной фотогалереи (назовем ее портфолио) стало невероятно легко с технологией CSS Grid. В итоге мы должны прийти к такому результату.
HTML разметка
Обратите внимание, что картинки в портфолио не просто так вставлены, а служат фоном для текста. Это значит, что мы не можем вставить картинки средствами HTML, через тег img. Вспоминаем, что у CSS есть свойство background-image. Соответственно, сначала создадим саму секцию-портфолио с вложенными тегами div, а каждую картинку положим в отдельный тег div в качестве фона. Рекомендуется стили касающиеся медиа файлов не выносить в отдельный CSS файл. Медиа файлы должны оставаться в HTML разметке в виде инлайн стилей, если верстка в дальнейшем будет интегрироваться с WordPress или с другой CMS. Иначе пользователю будет неудобно управлять контентом через админ-панель.
HTML код без стилизации, зрелище не для слабонервных. Но не пугайтесь, сейчас стилизуем созданные классы и все быстро нормализуется.
CSS код
Посмотрим на макет и посчитаем сколько элементов находится в одном ряду. Берем по максимальному количеству элементов. В последнем ряду у нас находится 4 элемента. Следовательно, сетка состоит из четырех колонок по одной фракции в каждой.
// Grid контейнер
.portfolio-section display: grid; / * отобразить элементы как гриды * /
margin: 10px; / * отступы по краям * /
grid-template-columns: repeat(4, 1fr); / * шаблон для колонок * /
grid-gap: 10px; / * отступы между ячейками * /
>
Сделаем базовую разметку для грид элементов.
.portfolio-item display: grid; / * включение гридов для центрирования текста * /
min-height: 32vh; / * высота портфолио занимает один экран * /
background-size: cover; / * растянуть картинку на весь блок * /
background-position: center; / * расположение картинки в центре блока * /
text-align: center; / * горизонтальное выравнивание текста * /
align-content: center; / * вертикальное выравнивание текста * /
>
На данном этапе наша сетка выглядит вот таким образом. Осталось поработать с грид-элементами, которые занимают больше чем одну колонку или ряд.
Мы видим, что первый элемент занимает 2 колонки. Обратимся к первому элементу через псевдокласс nth-child(1) и пропишем шаблон, где 1/3 обозначает с с 1-ой по 3-ю линию.
.portfolio-item:nth-child(1) grid-column: 1/3; / * 1-ый элемент занимает две горизонтальных ячейки * /
>
Пятый элемент начинается на 2-ой позиции и заканчивается на четвертой.
.portfolio-item:nth-child(5) grid-column: 2/4; / * 5-ый элемент занимает две горизонтальных ячейки * /
>
Шестой элемент занимает четвертую колонку, но его нужно растянуть вертикально.
.portfolio-item:nth-child(6) grid-column: 4;
grid-row: 2/4; / * 6-ый элемент занимает две вертикальные ячейки * /
>
Создано 12.03.2021 10:07:26
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.
Не растягивается полностью background-image
Есть контейнер display: grid, к его item-am не до конца применяется background-image, остаются небольшие зазоры. Пробовал так-же положить картинку в html а потом задать ей position: absolute, не помогло.
&__postgrid margin: 100px 0px 100px 0px display: grid grid-template-columns: repeat(8, 1fr) grid-template-rows: 250px 250px 250px grid-gap: 1.25em &__post2 grid-column: 1 / 3 grid-row: 3 / 3 background-image: url("../img/blog-standart-post.png") background-position: center background-color: red &__post3 grid-column: 3 / 5 grid-row: 3 / 3 background-image: url("../img/screen.png") background-position: center background-color: red &__post4 grid-column: 5 / 9 grid-row: 1 / 3 background-image: url("../img/gallery.png") background-position: center background-color: red 1 ответ 1
Не помогает, значит ошибки в синтаксисе. Вот, все работает.
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed'); body < padding: 0; margin: 0; background-color: white; color: white; min-height: 100vh; display: flex; justify-content: space-between; >div < width: 24vw; height: 100vh; background-color: magenta; background-image: url(http://lorempixel.com/100/100); background-repeat: no-repeat; background-position: center; font-size: 160%; font-weight: 600; text-shadow: 0 0 4px black; font-family: roboto condensed; display: flex; align-items: center; text-align: center; >div:nth-child(1) < background-size: none >div:nth-child(2) < background-size: 100% 100% >div:nth-child(3) < background-size: cover >div:nth-child(4) background-size: none background-size: 100% background-size: cover background-size: contain.postgrid < margin: calc(12.5vh - 1.25em) 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(3, 25vh); grid-gap: 1.25em; >.postgrid>div < background-repeat: no-repeat; background-size: cover; box-shadow: 0 0 4px black; >.post1 < grid-column: 1 / 5; grid-row: 1 / 3; >.post2 < grid-column: 1 / 3; grid-row: 3 / 3; background-image: url("http://lorempixel.com/100/100"); background-position: center; background-color: red; >.post3 < grid-column: 3 / 5; grid-row: 3 / 3; background-image: url("http://lorempixel.com/100/100"); background-position: center; background-color: red; >.post4 < grid-column: 5 / 9; grid-row: 1 / 3; background-image: url("http://lorempixel.com/100/100"); background-position: center; background-color: red; >.post5 < grid-column: 5 / 8; grid-row: 3 / 3; >