Как сделать такой фон из svg на всю ширину?

Question

[IIIu6ko]

Подскажите как сделать вот такой фон. Белое - это svg.
Фон должен тянуться на всю ширину, возможно ли это сделать не коряво?

Answer 1

[IIIu6ko]

В общем, проблему решил. Обрезал фон сверху и снизу, подставил куда надо, но он не растягивался на всю ширину т.к. svg, там пропорции видимо. Решается это добавлением атрибута preserveAspectRatio="none" в сам svg.

Answer 2

[Игорь]

я бы сделал так:
разбил на отдельные секции,
сохранил фон в svg
и на каждую секцию установил через background
и background-size cover

Comments

[IIIu6ko]

Разбил на отдельные секции? про что речь?

[Игорь]

IIIu6ko,
вот так как-то

[Игорь]

IIIu6ko, в средней секции где ничего нету, там будет пусто соответсвенно

[IIIu6ko]

Игорь, Да, тоже уже так сделал, но svg не тянется на всё ширину, а png искажается.

[IIIu6ko]

Игорь, background-size cover тут не подходит, он обрезает изображение.

[Игорь]

IIIu6ko, про cover наверное да, тут наверноет contain подойдет
а почему svg не тянется во весь экран? должно же

[IIIu6ko]

Игорь, Неа, не тянется, он только пропорционально. Если высоту ограничить, то не тянется.

Answer 3

[Валентин Бируля]

Вот наверстал чуть чуть ,тебе так надо?


А с помощью background-image нельзя?

Comments

[IIIu6ko]

Нельзя фиксировать высоту.

[Валентин Бируля]

А соотношения пробовал добавлять?
Ну там один блок 1:5 другой 4:3