@DeniSidorenko

Как сделать такую форму для секции?

Добрый день, сколько себя помню всегда верстал такие секции след образом. Просто брал картинку в таком формате и ставил как background. Но заказчик хочет что бы в будущем имел возможность менять картинку а форма секции ( круглая ) всегда оставалось таким. Скажите пожалуйста по средствам css, html как сделать что бы при смене фона картинки, фон всегда оставался такой формой?
WiqCfZ6mfxw.jpg
  • Вопрос задан
  • 113 просмотров
Решения вопроса 3
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
html
<div class="section"></div>

css
.section {
background: url('...') 50% 50% / cover no-repeat #color;
position: relative;
z-index: 1;
}
.section:after {
content: "";
position: absolute;
bottom: 0;
width: 100%;
left: 0;
z-index: 2;
background: url('...')... // png либо svg
}


либо Как реализовать с помощью SVG?
https://codepen.io/sfi0zy/pen/PbNEeq?editors=1000

html
<div class="section">
    <svg></svg>
</div>


css
.section {
background: url('...') 50% 50% / cover no-repeat #color;
position: relative;
z-index: 1;
}
.section svg {
content: "";
position: absolute;
bottom: 0;
width: 100%;
left: 0;
z-index: 2;
}
Ответ написан
@lolzqq
Можно делать 2 и более бэкграундов через CSS.
Для бэкграундов можно задавать позицию, тоже через CSS.
Вот, посмотрите :
htmlbook.ru/blog/dva-fona-i-bolshe
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
от 56 000 до 56 000 руб.
WWHW Санкт-Петербург
от 40 000 до 100 000 руб.
АМТ Екатеринбург
от 40 000 до 50 000 руб.