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

Question

[DeniSidorenko]

Добрый день, сколько себя помню всегда верстал такие секции след образом. Просто брал картинку в таком формате и ставил как background. Но заказчик хочет что бы в будущем имел возможность менять картинку а форма секции ( круглая ) всегда оставалось таким. Скажите пожалуйста по средствам css, html как сделать что бы при смене фона картинки, фон всегда оставался такой формой?

Comments

[hesrun]

Картинку ставьте как обычно, а волну накладываете через before или after. Вариантов много...

Answer 1

[Сергей Горячев]

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;
}

Comments

[DeniSidorenko]

А как быть если svg в таком формате . Возможно вместо красного фона поставить свое изображение?
CodePen

[Сергей Горячев]

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

[Сергей Горячев]

DeniSidorenko, в таком случае, не через псевдоэлемент, а дополнительным блоком, но тоже абсолютным.

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

[DeniSidorenko]

Сергей Горячев, Но как тогда в том коде заключить само изображение

[Сергей Горячев]

DeniSidorenko, через css { background } либо если нужно менять через админку инлайном style="background" .

[DeniSidorenko]

Сергей Горячев, Спасибо большое сейчас попробую. Непосредственно для svg задавать background?

[Сергей Горячев]

DeniSidorenko, svg это только волна, она лежит внизу блока.
Как сделать волну по Безье я уже скидывал выше.
А картинку задаете для section.

[DeniSidorenko]

Сергей Горячев, Спасибо большое понял. Единственное я уже сделал вот по данному примеруhttps://codepen.io/anon/pen/xmOpdM?editors=1000. Там меняю лишь картинку через image. Но есть одна большая проблема . PATH всегда имеет ширину 1920 и на моем экране 1519.2 волна не до конца

[Сергей Горячев]

DeniSidorenko, по-моему, она у тебя просто вниз уехала, судя по картинке.

[DeniSidorenko]

Сергей Горячев, Через инспектор посмотрел , path - 1920px

[Сергей Горячев]

DeniSidorenko, да не, вниз уехала. А вообще, надо сделать 100%, svg адаптируется.

[DeniSidorenko]

Сергей Горячев, Да спасибо тебе большое, надо было фиксированную ширину указать) Я просто задал position absolute для svg и позиционируется относительно header'a)

[DeniSidorenko]

Сергей Горячев, Фиксированную высоту) Хэдар меньше имел и за чего такое. Слушай а можно ли сделать что если даже header меньше имеет она подстраивалось. Типа object-fit cover) Сейчас она просто работает если высота совпадает с тем что в макете. А можно ли сделать что бы даже если высота была меньше пропорции линии сохранялись?

Answer 2

[Олег]

Можно делать 2 и более бэкграундов через CSS.
Для бэкграундов можно задавать позицию, тоже через CSS.
Вот, посмотрите :
htmlbook.ru/blog/dva-fona-i-bolshe

Comments

[DeniSidorenko]

Второй фон задать как белый с прозрачностью?

[Олег]

DeniSidorenko, png и основной для body - белый

Answer 3

[Александр Алексеев]

svg mask
svg clip-path