2

Как сделать такой фон на css? И возможно ли? Спасибо!

Фон

1
  • 1
    А можно ли это будут три разных блока? Один с крупным горошком, один с мелким и сплошной фон с рамкой посредине. 15 мар 2020 в 23:06

2 ответа 2

4

Только CSS...

body { height: 100vh; margin: 0; }

.multi_bg {
  position: relative;
  margin: 0 auto;
  height: 720px;
  width: 714px;
  /* Крупный горох */
  background-size: 86.4px 86.4px;
  background-repeat: repeat;
  background-position: 43px -14px, 0px 29px;
  background-color: #8cc63e;
  background-image: radial-gradient(circle, white 11px, transparent 12px), radial-gradient(circle, white 11px, transparent 12px);
}
.multi_bg::before,
.multi_bg::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
}
.multi_bg::before {
  top: 460px;
  height: 260px;
  /* Мелкий горох */
  background-size: 21.6px 21.6px;
  background-repeat: repeat;
  background-position: 10px 1px, 20.4px 11.4px;
  background-color: #89c73e;
  background-image: radial-gradient(circle, #e4f6c2 3px, transparent 3px), radial-gradient(circle, #e4f6c2 3px, transparent 3px);
}
.multi_bg::after {
  top: 336px;
  height: 124px;
  /* Стежки */
  background-size: 14.4px 3px;
  background-repeat: repeat-x;
  background-position: 9.5px 8.4px, 9.5px 114px;
  background-color: #9dce5b;
  background-image: linear-gradient(90deg, transparent 6.8px, #cff699 6.8px), linear-gradient(90deg, transparent 6.8px, #cff699 6.8px);
}
<div class="multi_bg"></div>

4

Вообще на svg можно нарисовать всё..как вот я в этом примере

Главное его понять, влюбится и потом использовать

Ответ по теме

html,body{
  min-height: 600px;
  margin: 0;
}

body{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 500' width='100%25'%3E%3Cdefs%3E%3Cpattern id='p1' width='10%25' height='10%25'%3E%3Crect width='30' height='30' fill='green'/%3E%3Ccircle cx='10' cy='10' r='4' fill='%23fff'/%3E%3Ccircle cx='25' cy='16' r='4' fill='%23fff'/%3E%3C/pattern%3E%3Cpattern id='p2' width='10%25' height='100%25'%3E%3Crect width='30' height='30' fill='green'/%3E%3Cpath d='m0,4 10,0' fill='none' stroke='%23fff' stroke-width='3' stroke-dashoffset='0 3 3'/%3E%3Cpath d='m0,26 10,0' fill='none' stroke='%23fff' stroke-width='3' stroke-dashoffset='0 3 3'/%3E%3C/pattern%3E%3Cpattern id='p3' width='5%25' height='6%25'%3E%3Crect width='30' height='30' fill='green'/%3E%3Ccircle cx='5' cy='5' r='2' fill='%23fff'/%3E%3Ccircle cx='13' cy='10' r='2' fill='%23fff'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='300' height='200' fill='url(%23p1)'/%3E%3Crect width='300' height='80' y='200' fill='url(%23p2)'/%3E%3Crect width='300' height='220' y='230' fill='url(%23p3)'/%3E%3C/svg%3E");
  background-size: 600px auto;
  background-repeat: repeat;
}

Ответ не по теме

body{
 min-height: 500px;
 background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Ccircle cx='50' cy='50' r='10' fill='green'/%3E%3Ccircle cx='110' cy='50' r='10' fill='green'/%3E%3Ccircle cx='20' cy='20' r='20' fill='green'/%3E%3Ccircle cx='80' cy='20' r='20' fill='green'/%3E%3C/svg%3E");
   background-size: 120px 60px;
   background-repeat: repeat;
}
}

Ваш ответ

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

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