Как быть с картинками на заднем фоне в адаптивной верстке?

Question

[exitialis]

В общем пишу сайт на bootstrap, есть картиночка . Она мне нарисована дизайнером как фон для верхнего меню. И возникает вопрос, как ее туда встроить, чтобы сохранилась адаптивность? Если ей просто прописать background-size: 100%; то она просто уменьшается как и по высоте, так и по ширине, и надписи с нее съезжают соответственно. background-size: cover; и остальные тоже не подходят. Знает кто-нибудь, как с ней быть? Заранее спасибо за ответы!

UPD:
Вот скрин сайта, пока что криво, но работаю над этим:

Comments

[Юнус Газиев]

Было бы легче понять если выложите скрин дизайна шапки со всеми элементами

Answer 1

[Александр]

Как вариант:
Скругления и бордер у блока с background'ом из вашей картинки задать через css, а при уменьшении размера окна - обрезать фон по X (overflow-x: hidden), он все равно более менее однородный.

Comments

[exitialis]

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

[Вадим Белкин]

Думаю это самый правильный вариант. Так как область с этим изображением не разумно масштабировать по высоте (в ней же какой-то контент)

Answer 2

[Никита Иванов]

height: 100px;
width: 100%;
background: #fff url('../img/bg.png') 0 0 no-repeat;
-webkit-background-size: 100% auto;
background-size: 100% 70px;

Comments

[exitialis]

Что-то не то. Прописал эти стили, и место где должен быть плок стало белым. Зачем там цвет сначала, а потом url?

[Никита Иванов]

Вообще подразумевается правилами хорошего тона прописывать цвет фона, независимо от того, есть ли картинка поверх или нет. Можешь убрать. А насчет картинки, url до картинки у тебя правильно прописан? Посмотри внимательно, где у тебя расположен css, а где фон.

[exitialis]

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