Как правильно сделать такой background?

Question

[xonar]

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

Это как выглядит на макете:



А это как сделал я, но кажется неправильно, потому что если мышкой делать расширение экрана меньше, то меню остаётся по центру, а фон улетает в левую сторону.

https://codepen.io/ruslan-lysenko/pen/voBbae

Comments

[Brad9aga]

У тя там полня жопа

[xonar]

Brad9aga, В чем?

[Brad9aga]

xonar, во всей верстке,я там скинул пример, но идеально делать не стал

[xonar]

Brad9aga, пример видел, спасибо. Я уже так же реализовал. Но, теперь стало интересно в чем остальном жопа? Пример можно.

[Brad9aga]

xonar, судя по тому примеру что ты дал в вопросе у тебя далеко не так реализовано,я разбираться не стал, просто по своему напечатал,так было проще

[xonar]

Brad9aga, Я написал, что уже так же реализовал, а не что так было изначально.

Answer 1

[Михаил]

Фон с background-size, background-position
Блок который наезжает на фон, так просто margin-top -Npx или через position relative его немного подвинуть, если в дизайне он как-бы над потоком,
Но уж никак не через absolute

Comments

[xonar]

Не подумайте, что наглею. Не могли бы показать готовый вариант, вот код - https://codepen.io/ruslan-lysenko/pen/voBbae

а то плохо догоняю.

[Михаил]

xonar, https://codepen.io/notiv/pen/zgObGK

[xonar]

Михаил, Вы не правильно поняли меня. Я имел ввиду, задний фон с бегуном и меню. Фон, который висит на

Правильно ли я его повесил на ? Если играться с шириной экрана, то он съезжает.

[Михаил]

лого, навигация, социалки, поиск это header, который absolute/fixed с z-index
бегун и текст на нём это отдельная секция, которая находится после header, c фоном как я выше объяснил

[xonar]

Михаил, Ааа, даже так. Это точно будет так правильно?

[Михаил]

xonar, это 1 из вариантов

[Михаил]

header/footer это элементы которые не должны меняться от страницы к странице, если ваш бегун есть на внутренних страница, тогда он в header, если нет (что скорее всего, т.к. эта страница — лендинг) то он отдельно

[xonar]

Михаил, спасибо большое, понял

Answer 2

[Brad9aga]

для ознакомления
https://jsfiddle.net/rnu7s1mh/1/

Answer 3

[Дмитрий Дерепко]

Создаете меню после этого баннера и делаете ему отступ либо через margin, либо position: absolute.
Лучше второй вариант

Comments

[Михаил]

через position: absolute лучше?

[xonar]

А сам баннер кому прописать? Не совсем понимаю.

[Дмитрий Дерепко]

xonar, https://webformyself.com/lentochnyj-banner-na-chis...
или вот накидал по-быстрому
jsfiddle.net/2jx6uq34

[xonar]

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

Правильно ли я его повесил на ? Если играться с шириной экрана, то он съезжает.

[Дмитрий Дерепко]

xonar, попробуйте background-size: cover; у header