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

Question

[Паша Тарасенко]

Имеется такой блок,
Почти на всех страницах сайта блок меню и фона повторяется, меняется только картинка фоновая и заголовок. Как бы его так правильно сделать чтоб можно было использовать на остальных страницах. Так же фон должен быть адаптивным, т.е для телефона, планшета и десктопа разный размер фона. Через css фон задать это явно не вариант.

Answer 1

[Андрей Федоров]

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

Comments

[Паша Тарасенко]

не совсем понятно

[Андрей Федоров]

codepen.io/aliencash/pen/xRgPVM
Раскоментируйте background-color: transparent; и потом меняйте картинки как хотите.

Answer 2

[Ankhena]

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

Задаете фон родительскому блоку (возможно, это прямо body, по скрину не видно). Для разных изображений задаете разные классы.

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

Реализация зависит от того, насколько сами картинки подготовлены к такой жизни. Через background-size или разные картинки через media запросы

Через css фон задать это явно не вариант.

Именно CSS как раз то, что нужно.
А Вы бы через что хотели?

Comments

[Паша Тарасенко]

на бекенде потом проблем не будет если через css задавать фон?

[Ankhena]

Паша Тарасенко: Какая разница что писать прямо пути картинки или классы? Ну кроме того, что классы и CSS правильнее.