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

Question

[oksana_melikhova]

Здравствуйте. Есть такая картинка, извлечённая из макета:

Как её лучше всего реализовать в качестве фона в данном макете?


Псевдоэлемент приходится подгонять постоянно, т.к. "съезжает" словно бы в сторону

Comments

[VoidVolker]

Лучше для чего именно? Проще всего обычный SVG.

[oksana_melikhova]

VoidVolker, для адаптива
Фон, псевдоэлемент и т.п.

[catch-a-chalk]

Экспортировать этот фон вместе с путешественницей в одну .png, загрузить как бекграунд, подогнать с помощью background-position

[Ankhena]

Псевдоэлемент приходится подгонять постоянно, т.к. "съезжает" словно бы в сторону

Считать от центра. Не важно фон или псевдо.
Либо от правого края и трансформ с %.

Идея экспортировать вместе с девушкой - неплоха, если девушка не меняется.
Только не забудьте сделать варианты для разной плотности экранов и через image-set

[Никита Геннадич]

Ankhena, а, то есть transform это гораздо лучше отдельного дива?)

Рука лицо, хспде.

[Ankhena]

Никита Геннадич,

а, то есть transform это гораздо лучше отдельного дива?)

Т.е. вы всё таки знаете минусы лишнего дива вместо псевдика. Уже хорошо.

Но нет, трансформ не лучше.
Лучше просто фоном.
Но если выбирать между псевдо с трансформом и дивом с ним же, то лучше псевдик.

[Никита Геннадич]

Т.е. вы всё таки знаете минусы лишнего дива вместо псевдика. Уже хорошо.

Ankhena, что? Я всё ещё не вижу никакой аргументации чем это лучше отдельного дива.

Псевдо для стилизации применять — это всегда кривые-косые костыли, которые везде по разному выглядят.

[Максим]

Вы, кстати, сами можете посмотреть то как реализовано: https://technext.github.io/jadoo/v1.0.0/index.html

Answer 1

[Ankhena]

Старайтесь разделять смысл (разметку), украшения (стили) и поведение (скрипты).
Кодгайд гугла
Критерии верстки для первокурсников

У фигуры довольно странные правый и верхний края. Либо древний макет либо косяк дизайнера.
А полная резина, судя по этому куску макета, тоже не предусматривается.

В идеале экспортируем пятно в том виде, в котором оно нужно нам, а не полное, как сейчас, если нет каких-то важных причин так не делать. Но пока на основе вашего пятна.

Самый простой вариант: задаем фон для body и дорисовываем направо градиент.
https://codepen.io/AnnaSummer/pen/WbQwNrE

фон

background:
  url(https://habrastorage.org/webt/68/75/69/687569cb9ee3a139342935.png) no-repeat top -100px left calc(50% + var(--container-width)/2 - 330px), 
   #ffffff  linear-gradient(#fff1da,  #fff1da) no-repeat top right / calc(50% - var(--container-width)/2) 773px;

Тут использована ваша png. Если пятно берем отдельно, то экспортируем в svg, если слепляем с девушкой то png и image-set. Но может получиться сложнее с размерами.
--container-width - ширина контейнера.
Сдвиги - взяты с потолка, берите или вычисляйте из макета.
Вместо дурацких компенсирующих сдвигов, я бы обрезала эту SVG до нужных размеров. Аналогичный эффект должен дать экспорт с включенной галкой clip content на нужном фрейме.

В адаптиве перестраиваем по макету.

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

Answer 2

[Никита Геннадич]

Просто блок в начале body с position fixed прибитый справа вверху.
Поиграться с background-size. Ну и не забыть указать background-position и z-index (у остальных элементов, очевидно z-index должен быть выше).

Что-то в духе:

.block {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background-size: 30%;
  background-position: top right;
  z-index: 0;
}

Тут в комментариях советуют псевдо-элементы для этого использовать: так делать не надо, не повторяйте плохую практику. Там же в каментах разжёвано почему. Вкратце — псевдоэлементы это полезная штука, но делать на них абсолютно все бэкграунды это шизофрения, а чревато это например тем, что половина юзеров будут видеть ваш сайт не так как вы. Нюансов там в разы больше чем у абсолютного позиционирования и z-index.

Comments

[Ankhena]

position fixed

Ну и зачем там прилипший фон?
Да ещё и дивом сделанный?

z-index (у остальных элементов, очевидно z-index должен быть выше).

Вообще отличный план (Не надо так делать, если есть возможность не делать).

прибитый справа вверху

Теперь откройте на большом мониторе: контент остался по центру, а девушка с пятном улетела вправо.
Покажите результат дизайнеру, пусть плачет.

[Никита Геннадич]

Ankhena, а в чем проблема прилипшего фона? Почитайте хоть что-нибудь про резиновый дизайн, прекратите делать говно-сайты под два формата, экранов в мире много больше.

В чём проблема отдельного блока? У вас какое-то ограничение на количество блоков на странице? Или у вас болезненное желание верстать всё на псевдоэлементах? Можно и так, конечно, можно даже назначить этот бэк какому-нибудь из контейнеров. Если бы человеку было понятно какому, он бы тут не задавал таких вопросов.

Что не так с z-index? Тоже какие-то проблемы о которых рассказали на курсах?

Попробуйте уже хоть один свой тейк внятно аргументировать.

Теперь откройте на большом мониторе: контент остался по центру, а девушка с пятном улетела вправо.
Покажите результат дизайнеру, пусть плачет.

У вас, видимо, привычка верстать всратые убогие лэндинги ни на секунду не задумываясь о том как ими люди пользуются. Как и у вашего дизайнера.

[Ankhena]

Никита Геннадич,

а в чем проблема прилипшего фона?

Ни в чем, кроме того, что он там не должен прилипать. Он там с девушкой дружит.
Пятно само по себе могло бы и прилипнуть десяток или пару десятков лет назад (когда там bg attachment было модно), но с девушкой - очень сомнительно.
Но это скорее вопросы к дизайнеру или ТЗ.

Что не так с z-index? Тоже какие-то проблемы о которых рассказали на курсах?

С одним - ничего или близко к тому для современных браузеров.
Только зачем вообще, если можно без него.

очевидно z-index должен быть выше

Очевидность работы z-index вообще сомнительна, а для новичков особенно.
И пока не появилось прозрачности или трансформа или других аспектов меняющих контекст наложения, всё будет хорошо. Но мы вообще не знаем, что там ниже в макете.

У вас, видимо, привычка верстать всратые убогие лэндинги ни на секунду не задумываясь о том как ими люди пользуются. Как и у вашего дизайнера.

Моя фраза вроде была как раз об обратном, к тому, что устройства бывают очень разные.
Если хотите продолжать беседу, то смените тон.

[Никита Геннадич]

Ankhena, про fixed я конечно чепуху сморозил, вы правы. Видимо перегрелся или заработался.

Имел ввиду, разумеется, position: absolute, исправил в ответе.

В чём минус отдельного дива не понимаю до сих пор. Это всяко лучше чем псевдоэлементы, которые вообще не для этого предназначены.

Очевидность работы z-index вообще сомнительна, а для новичков особенно.

Нет там ничего сомнительного, это просто номер слоя, в чём тут можно запутаться?

[Ankhena]

Никита Геннадич,

Имел ввиду, разумеется, position: absolute, исправил в ответе.

Ага
Со всеми приключается.

Нет там ничего сомнительного, это просто номер слоя, в чём тут можно запутаться?

z-index
Вопрос вам, как профи (просто, чтобы вспомнить, что всё не так просто):
На странице есть элементы с z-index 0, 20 и 99. Всегда ли 99 будет поверх двух остальных?
Для новичков про нюансы контекста наложения:
css.yoksel.ru/kontekst-nalozheniya
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

В чём минус отдельного дива не понимаю до сих пор.

Давайте так: повторю, что один див вообще не сделает погоду и мы не будем говорить про экономию на спичках. Будем считать, что страница сложная и есть за что бороться и что оптимизировать.

before/after vs div

Простые аргументы:

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

(Если вернуться к тому же z-index или избавлению от него, совсем элементарная замена before на after поменяет порядок наложения элементов. В случае div, придётся переставлять его в разметке.)

Яркий пример: современная стилизация радио и чекбоксов. Можно нагородить древний огород из пустых тегов и сложных селекторов. (Написание таких селекторов, несомненно, очень полезно при обучении и изучении работы CSS, но в реальных проектах лучше без них)
А можно использовать appearance none и стилизовать напрямую, а также использовать before/after этих инпутов.

Посложнее:

Чем сложнее DOM дерево, тем тяжелее будут работать сложные селекторы.
Это же усложнит и замедлит операции, связанные с обходом, поиском и манипуляциями через JS.
При замене на псевдо снижается нагрузка на память, поскольку каждый DOM-элемент — это объект с собственными свойствами и событиями, а псевдоэлементы — лишь часть визуального оформления.

С точки зрения рендеринга браузера, псевдоэлементы обрабатываются быстрее, чем полноценные DOM-узлы, поскольку не требуют поддержки событий, не участвуют в DOM-операциях и не влияют на структуру документа. Они добавляются на этапе формирования рендер-дерева и используются только для визуализации.

В вопросах на stackoverflow и других частных ресурсах есть примеры исследований скорости рендеринга и fps при анимациях, легко гуглятся. Не хочу приводить сюда ссылки, потому что кроме этого там есть и устаревшая информация. Да и думаю, что вы, как профи, можете самостоятпельно сотворить такой тест, если действительно интересно.

Представьте, что спискам на сайте нужно добавить стрелочки/галочки/звёздочки. Вы же не станете засовывать в каждый по пустому спану. (Я надеюсь)

Почему-то один из популярных запросов ко мне: у нас тупит страница, хепл плиз. Речь в основном о длинных страницах или многоблочных лендингах. Обычно с них удается удалить пару десятков тысяч узлов. Конечно, тут роль играет не только количество, но и их вложенность.

Псевдо для стилизации применять — это всегда кривые-косые костыли, которые везде по разному выглядят.

Действительно по-разному могут работать всякие ::marker, специфические псевдо инпутов или селектов и т.д.

::before и ::after работают всюду одинаково и их стилизация отличается от div только
1. Наличием content
2. По умолчанию разным display, у div он блочный, у псевдо инлайновый.
3. Начальный порядок "элементов". Before всегда первый, after последний, div можно вставить куда угодно.
Всё.

Если у вас что-то пошло не так, приходите с отдельным и конкретным вопросом с примером. Можете даже позвать.

[Никита Геннадич]

@Ankhena

На странице есть элементы с z-index 0, 20 и 99. Всегда ли 99 будет поверх двух остальных?

Ну понятно что ещё от z-index родителя зависит. В целом всё равно там ничего сложного нет, не надо драматизировать — если человек концепции дерева и каскадности понимает, то как-нибудь разберётся.

Давайте так: повторю, что один див вообще не сделает погоду и мы не будем говорить про экономию на спичках.

Вас вообще куда-то не туда несёт. При чём тут экономия вообще? В современных сайтах десятки тысяч узлов, на это вообще плевать полностью.

У меня вообще с этого место ощущение что я с нейронкой переписываюсь. Нуок, давайте потрачу ещё чуть-чуть времени чтобы это разобрать.

Чистота кода - в разметке смысл, украшения в стилях.

Это так себе аргумент, когда у вас из одного места грязь в другое переезжает: вместо просто классов в CSS будет вермишель из псевдоэлементов. И это просто потому что вы так привыкли. Да, в целом семантическая вёрстка это здорово, но учитывая что в коде всё равно неизбежно торчит куча IMG или SVG этот аргумент смысл теряет. Вы ведь не верстаете чисто на дивах с бэкграундами, или всё же?

Яркий пример: современная стилизация радио и чекбоксов.

Да, это отличный пример максимально уродского говнокода, браво! То что за много лет в стандарте так и не предложили нормальный путь стилизации инпутов кроме разных извращений с разными псевдо-элементами, которые приходится по разному указывать для разных браузеров это крайне показательно демонстрирует ущербность подхода стилизации через псевдо-элементы. А уж сколько вариации такой стилизации по сети гуляет, вообще не счесть! И у почти у каждого есть тот или иной косяк.

Посложнее:
Чем сложнее DOM дерево, тем тяжелее будут работать сложные селекторы.

Вы уже забыли что в начале писали? А как же "не будем говорить про экономию на спичках"?
От одного дива погоды просто никакой, дайте ему специфичный класс и всё, на остальные селекторы он не повлияет НИКАК. Просто скопировали ответ нейронки? Своих аргументов нет? Может лучше промолчать когда так?

Представьте, что спискам на сайте нужно добавить стрелочки/галочки/звёздочки. Вы же не станете засовывать в каждый по пустому спану.

Во-первых у списков есть list-style-image. Во-вторых я нигде не писал что псевдоэлементы вообще бесполезны. Я говорю конкретно про то что делать на них основной бэкграунд страницы это шизофрения. Потому что у вас теряется структура логичная кода вашего.

И что-то пока я ни единого внятного аргумента почему простой и очевидный способ с дивом плох я не вижу. Про семантику ещё-туда сюда довод, но учитывая какой мусор в коде на абсолютном большинстве современных сайтов он вряд ли часто релевантен.

::before и ::after работают всюду одинаково и их стилизация отличается от div только

Пф... О сколько вам, открытий чудных.

Ладно, я понял. Продолжайте верстать как вам нравится. У меня нет вопросов к вам.

[Ankhena]

Никита Геннадич,

Пф... О сколько вам, открытий чудных.

Ну, открытий чудных всем, поскольку всё это продолжает развиваться.
Прийти с конкретной проблемой я уже предложила.

То что за много лет в стандарте так и не предложили нормальный путь стилизации инпутов кроме разных извращений с разными псевдо-элементами, которые приходится по разному указывать для разных браузеров это крайне показательно демонстрирует ущербность подхода стилизации через псевдо-элементы

Вот, например, с этой. Где, как и почему обычные before after у вас перестают одинакового работать внутри тега уже неимеющего начальных стилей при appearance none.

Ну понятно что ещё от z-index родителя зависит.

Верно. И ещё почти десятка других нюансов. В статье на MDN перечислены.

При чём тут экономия вообще? В современных сайтах десятки тысяч узлов, на это вообще плевать полностью.

Смартфонам не плевать.
Месяц назад был сайт, на смартфонах скрипел. Убрали около 10 тыс нод, сократив примерно на треть, забыла сколько точно было до, можно по коммитам посмотреть, если прям интересно. Стало заметно легче.

Во-первых у списков есть list-style-image

Есть, конечно. Ещё бы к нему можно было что-то ещё хорошее применить.

. Да, в целом семантическая вёрстка это здорово, но учитывая что в коде всё равно неизбежно торчит куча IMG или SVG этот аргумент смысл теряет.

Если эти img это декоры, а не контент, то не понятно, что они делают в разметке.

С svg аналогично. Кроме случаев сложной анимации или другого взаимодействия (например, карта с областями или схема этажа и тд) svg в разметке делать нечего. Современные спрайты (стеки) работают из css, кастомные свойства оттуда же, смена цвета тоже. Даже прилетевшая с бэка в атрибут style кастомка будет лучше.
Если на ваших сайтах они до сих пор в разметке, имеет смысл хотя бы на новых сайтах переходить на светлую сторону.

Ладно, я понял. Продолжайте верстать как вам нравится. У меня нет вопросов к вам.

Да, и бэки и, как оказалось, фулстеки не хотят понимать этих нюансов, считая верстку несущественной фигней и верстая по принципам 2010 или даже раньше. Но то, что уже видите мусор на большинстве сайтов немножко обнадеживает.

И что-то пока я ни единого внятного аргумента почему простой и очевидный способ с дивом плох я не вижу

Мне жаль, но может быть через некоторое время.

Кстати, можно загуглить критерии качественной вёрстки. В большинстве будет что-то типа "нет лишних тегов используемых только для стилизации и которые можно заменить на псевдо".
Например, начать отсюда https://habr.com/ru/companies/htmlacademy/articles...

Думаю, для ТС тут уже полно материала для размышления и выбора варианта решения.
Пожалуй, главное помнить, что это решение выбирается не на всю жизнь и в разных ситуациях можно выбирать разные подходы.

[Никита Геннадич]

Ankhena

Вот, например, с этой. Где, как и почему обычные before after у вас перестают одинакового работать внутри тега уже неимеющего начальных стилей при appearance none.

Если по вашему мнению оно везде хорошо работает, то не вам учить других как им пользоваться. Завязывайте с этим менторским тоном, вас это не красит, особенно на фоне непонимания простых аргументов которые вам приведены выше.

У меня проблем с ними нет, потому что я ими пользуюсь по назначению, а не для установки основного фона страницы.

Верно. И ещё почти десятка других нюансов. В статье на MDN перечислены.

Нюансов у псевдоэлементов там не меньше перечислено. Какое это имеет отношение к вопросу? Или аргумент "новичок не поймёт как работают слои", по-вашему является аргументом к тому чтобы их не использовать?

Убрали около 10 тыс нод, сократив примерно на треть, забыла сколько точно было до, можно по коммитам посмотреть, если прям интересно. Стало заметно легче.

Я всё ещё не понимаю при чём тут добавление ОДНОГО дива в конкретном кейсе. Вы точно нить беседы не теряете?

Если эти img это декоры, а не контент, то не понятно, что они делают в разметке. С svg аналогично.

Я вам большой секрет открою: такие вещи как иконки зачастую делаются именно вставкой SVG, либо буквально тегом SVG, либо спаном с бэкграундом, представляете. И это именно декоры, но поди ж ты, они в разметке, какой ужас! Понимаю, это тяжело осознать, но вы попробуйте.

Также понимаю, что тяжело понять о чём вам толкуют, когда упёрлись рогом в свои представления и не слышите оппонента. И не важно фулстек я или верстальщик - я вам аргументы, вы мне про то как вы улучшили вёрстку. Попробуйте перечитать.

Да, и бэки и, как оказалось, фулстеки не хотят понимать этих нюансов, считая верстку несущественной фигней и верстая по принципам 2010 или даже раньше. Но то, что уже видите мусор на большинстве сайтов немножко обнадеживает.

Ну, судя по вашему уровню, даже "кураторство" в профильном теге вас хорошим верстальщиком не делает, потому что вы фон страницы предлагаете псевдоэлементами делать и позицию свою аргументировать не можете. Куда уж нам, фулстекам до такого уровня.

Ладно, это уже действительно на шоу какое-то похоже. Вижу на QnA у Хабра действительно проблемы какие-то с компетенцией кураторов, один вон БЭМ защищал аргументируя тем что его в Яндексе придумали, теперь вот бэкграунды на псевдоэлементе, просто блеск.

[Ankhena]

Никита Геннадич,

У меня проблем с ними нет, потому что я ими пользуюсь по назначению, а не для установки основного фона страницы.

По меньшей мере дважды написали, что есть.

Нюансов у псевдоэлементов там не меньше перечислено.

Пока нет примера или ссылки на эти нюансы - пустые слова.

Я вам большой секрет открою: такие вещи как иконки зачастую делаются именно вставкой SVG, либо буквально тегом SVG, либо спаном с бэкграундом, представляете

Представляю, так, действительно делали и делают те, кто не заметил, что 2025.

Я всё ещё не понимаю при чём тут добавление ОДНОГО дива в конкретном кейсе.

Вы и не хотели этого понимать.

Но я и не для вас старалась, а для автора и для тех, кто ещё придёт сюда с аналогичными вопросами.

--
В одном диве нет ничего страшного.
Но это не единственный декор на сайте.
Все декоры вставим пустыми тегами - уже можем заметить разницу. Сделаем половину так половину сяк, нарушим единообразие, получим плохой код.

С вами прощаюсь.

[Никита Геннадич]

Ankhena

По меньшей мере дважды написали, что есть.

Нет, я написал что проблемы есть с отображением того что вы предлагаете в браузерах, которые не способны по стандарту всё рендерить. И проблемы у юзеров, которые потом пользуются тем, что такие как вы делаете, потому что проверить на всех девайсах у таких как вы обычно не принято, потому в обучающем видосе о таком не рассказывали.

Пока нет примера или ссылки на эти нюансы - пустые слова.

Я понимаю, что вам в целом тяжело интернетом пользоваться. Попробуйте поискать в гугле по запросам "CSS pseudo bug", походите по баг-трекерам разных веб-движков, почитайте что люди пишут, много нового для себя откроете. Я понимаю, что в розовом мире в котором вёрстке обучаются по ютубу, все браузеры работают одинаково и всё давно отлажено, но в реальном мире, поди ж ты, постоянно проблемы какие-то.

Вот, смотрите, буквально пять секунд гуглежа и вуаля: раз свежий баг с псевдо, два баг псевдо (уже годовалый, но всё такой же не исправленный), а вот и у хромиума проблемы. И это я только в паре браузеров посмотрел первые страницы поиска. А так этих багов - тысячи. А вот баги с абсолютным позиционированием найти будет кратно тяжелее. Если бы вы потрудились хоть немного изучить вопрос, вам было бы очевидно почему так.

Ну куда там, гораздо проще поясничать в каментах.

Представляю, так, действительно делали и делают те, кто не заметил, что 2025.

Хспде, вам не надоело позориться ещё? Вот вам современный NPM-пакет, из 2025-го, с 3 млн. скачиваний в неделю, который создаёт иконки в SVG. Один из десятков тысяч примеров. Думаете оно мало где используется?

Ну почитайте вы хоть что-нибудь кроме освежителя, ей-богу.

Вы и не хотели этого понимать.

Потому что речь не об этом. Ещё чуть-чуть и вы бы поняли, я верю.

Но я и не для вас старалась, а для автора и для тех, кто ещё придёт сюда с аналогичными вопросами.

Вы своей писаниной бессвязной, а также пастой из нейронки таким людям медвежью услугу совершаете.

Но это не единственный декор на сайте.

Ещё пара шажочков и до вас бы дошло, что "другой декор на сайте" мы не обсуждали тут вообще. Вы его зачем-то привели в качестве аргументации своей проф-непригодности.

С вами прощаюсь.

Слава богу, и вам всего хорошего.