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 that you have read and understand our privacy policy and code of conduct.

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