SVG background — как правильно сделать адаптивным?

Question

[Kostiantyn Kondratiuk]

На лендинг пейдж есть несколько секций с бэкграундом, прописанным вот таким образом:

.about-me {
    background-image: url(/img/back_2_section.svg);
    background-position: top;
    padding-top: 184px;
    padding-bottom: 145px;
}

Но когда начал делать адаптив фон ведет себя не адаптивно.
При большом разрешении:


Когда уменьшаю:



Может я не так прописываю сам фон?
Поделитесь, пожалуйста, правильным решением.

Comments

[Rustam Bainazarov]

https://developer.mozilla.org/ru/docs/Web/CSS/back...

[Kostiantyn Kondratiuk]

Рустам Байназаров, прочитал, прописал разные варианты. Не помогает.

[Rustam Bainazarov]

Kostiantyn Kondratiuk, нужен код, по скриншотам лично я вообще не вижу отзывчивости в вёрстке.

[Kostiantyn Kondratiuk]

Рустам Байназаров, я начал с бэкграунда. Для остального контента ещё ничего не прописывал в медиа-запросах.
Насколько я понял из самостоятельных поисков решения для адаптивности фона, что оно может быть в способе подключения СВГ как фона. Я подключил так, как в коде выше. Не знаю, как правильнее.

[Spartak (Web-StyleStudio)]

https://developer.mozilla.org/ru/docs/Web/CSS/obje...

[Kostiantyn Kondratiuk]

Spartak (Web-StyleStudio), IE не поддерживает. И это свойство прописывается к img, а у меня SVG вставлено бэкграундом.

Answer 1

[Ankhena]

Фоновые изображения адаптируются с помощью background-size
Или изменения размеров блока. Например, вставляются как фон псевдоэлемента и дальше регулируют размер псевдо, а фону задают contain, cover или 100% (или не 100)

Единственно отличие между растром и SVG в том, что растр меняет свои пропорции, а SVG обычно нет.
Чтобы менялись пропорции SVG у него должен быть атрибут preserveAspectRatio

Вот примеры
https://jsfiddle.net/0xrh6uvj/ - меняйте ширину окна с результатом

----
Но вы не сделали песочницу на jsfiddle.net с вашим проблемным кодом и не ясно, что вообще вы там творите.

Comments

[Kostiantyn Kondratiuk]

Вот секция с этим СВГ фоном - https://jsfiddle.net/Kindermns/fptwsL02/13/

В процесе экспериментов я решил поставить фон для , который находится в container и как результат - при изменении ширины экрана фон не режется и вроде всё норм. Прописал ему:

background-size: cover;
background-repeat: no-repeat;
background-image: url(/img/back_2_section.svg);

Но. Теперь фон, естественно, будет в границах контейнера, а надо на ширину экрана.
Прописываю то же самое для самой секции (в песочнице) и фон не адаптируется, а режется.
Не понятно, почему.

[Ankhena]

Kostiantyn Kondratiuk, Потому что не адаптировано содержимое секции. Это не фон не обрезается, а содержимое вываливается из секции. Потому что у него фикс ширина 1440.

Обведите секцию рамочкой - убедитесь сами.

[Kostiantyn Kondratiuk]

Ankhena, Ааа, т.е. виной всему неадаптированный контент? Значить если фон в формате СВГ то его надо адаптировать в посл. очередь дабы неадаптированный контент не сбивал с толку?

[Ankhena]

Kostiantyn Kondratiuk, без разницы в каком формате фон.

[Kostiantyn Kondratiuk]

Ankhena, Ок. Спасибо за неоднократную помощь!)

[Ankhena]

Kostiantyn Kondratiuk, велкам

Answer 2

[kryamk]

А мне кажется дело не в фоне, а в том что блок с фоном сжимается. Поудаляйте все блоки (прямо в диспетчере задач), кроме того что с фоном и посмотрите почему он сжимается. Можно также задать border или outline для блока с фоном чтобы его границы видеть

Answer 3

[Алексей Дубровин]

Изучайте

Comments

[Kostiantyn Kondratiuk]

Спасибо. Но там общие понятия описаны и об СВГ нет информации.

[Алексей Дубровин]

Kostiantyn Kondratiuk, Там и не нужна информация про SVG. Вы не понимаете что такое адаптив, по этому и спрашиваете.
SVG, JPG, PNG - формат для картинки. В браузере нету такого понимания для вёрстки как формат картинки.
Буквальна вся разница( Можно тянуть, сжимать без потерь, с фоном, без фона )
background - Свойство задающее фон для блока.

Общие понятия это и есть то как строится адаптивная верстка.
Смотрите каждое понятие. Это по сути реализация решения которые придумали люди.

Answer 4

[Сергей Левченко]

background-repeat: no-repeat;
background-size: cover;