1

Есть контейнер 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

Блин проблема в картинках была... Другие подставил все норм стало

2
  • А где background-size? 14 янв 2018 в 19:49
  • пробовал, не помогает
    – Temuchin
    14 янв 2018 в 19:52

1 ответ 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: contain
}
<div>background-size: none</div>
<div>background-size: 100%</div>
<div>background-size: cover</div>
<div>background-size: contain</div>

Grid:

.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;
}
<div class="postgrid">
  <div class="post1"></div>
  <div class="post2"></div>
  <div class="post3"></div>
  <div class="post4"></div>
  <div class="post5"></div>
  <div class="post6"></div>
</div>

3
  • спасибо конечно за ответ, ошибки в синтаксисе быть не может, несколько раз проверял, я думаю проблема именно с гридами, с флексами то оно отлично работает
    – Temuchin
    14 янв 2018 в 20:34
  • Я предполагал, что вы так скажете. ) Поэтому добавил в ответ разметку grid, но справедливости ради, это вы должны были сделать задавая вопрос - разместить модельный код, иллюстрирующий проблему. Как видно у grid то же нет проблем с background-size. 14 янв 2018 в 20:42
  • что ж до меня сразу картинки проверить не дошло, пол дня игрался с этой фигней
    – Temuchin
    14 янв 2018 в 20:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.