Как можно сверстать такой блок с табами?

Question

[Sergey750il]

Доброго времени суток. Встала задача сверстать следующий блок.

Фоновая картинка должна тянуться на всю ширину экрана, контент от 940-1260px. Нет идей как сверстать такой блок с табами. Использую табы Bootstrap 3. Вся сложность в том, как подогнать изображение у кнопки таба и содержимого.

Answer 1

[Сергей delphinpro]

Нет ничего проще :)
Ловите код (стили не оптимизированы, накидал на скорую руку, ну там сами допилите).
Вся соль в background-attachment.
jsfiddle.net/Lrkuhzda

Comments

[Sergey750il]

savepic.ru/6831978.jpg Там Бэкграунд на всю ширину тянется, но в любом случае большое спасибо. Сейчас буду дальше допиливать Ваш код. Еще раз Спасибо.

[Сергей delphinpro]

Sergey750il: Так я и сделал на всю ширину. Откройте окно браузера пошире

[Сергей delphinpro]

https://jsfiddle.net/Lrkuhzda/embedded/result/

[Sergey750il]

Еще раз Спасибо. Целый день мудохался.

[Sergey750il]

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

[Сергей delphinpro]

Sergey750il: background-attachment: fixed фиксирует фон относительно окна браузера. Благодаря этому получилось совместить фон на табах и контенте. Но этот фон будет всегда фиксированным и не будет скроллиться вместе с контентом.

[Sergey750il]

Сергей: Теперь ясно. Значит прокрутка фона вместе с контентом, технически невозможна в данном случае?

[Сергей delphinpro]

Sergey750il: Не буду утверждать на 100%, но, видимо, да.

Answer 2

[Pavel K]

Заготовку кода что ли предоставьте, думаю мало кто способен вот так сразу выдать готовое решение.
А самому прописывать всё лень.
И я так понимаю фон должен быть един у таба и его контента, так?

Comments

[Sergey750il]

Да. В этом вся и проблема, что фон должен быть единым у таба и контента.

Answer 3

[lnked]

take.ms/mHL3G

Comments

[Sergey750il]

Пробовал. Не все так просто. Выкладываю полный скрин, что бы было понятнее...