Как задать два бэкграунда?

Question

[starkingdom]

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

Comments

[Ankhena]

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

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

Вы можете сверстать эти два варианта по отдельности?
Ну вот так и верстаете. Один из них внутри соответствующего правила @media
Положение фона задается свойством background-position

[starkingdom]

Ankhena, ...

[Ankhena]

starkingdom, Что именно у вас не получилось? Разместите пример с видимой проблемой на codepen.io или аналоге.

Answer 1

[DZHAMBUALT]

Как по мне правильно будет сделать два отдельных элемента. Один элемент будет цветом фона другой картинкой. Такой подход позволит более гибко изменять структуру сайта, нежели делать только одним элементом.
Вот пример кода

Comments

[starkingdom]

Спасибо за ответ! это то что я и искал!

[Ankhena]

Как по мне правильно будет сделать два отдельных элемента. Один элемент будет цветом фона другой картинкой.

Ну хотя бы на псевдо заменить. Зачем это всё тащить в разметку? Ели бы картинка была бы контентной, а не украшением, тогда да, в разметку. А так, по-хорошему, украшениям не место в разметке (исключения, конечно, бывают, но тут не нужно)
Цветом залить весь блок. Картинку в псевдо. И перестраивать как угодно.