подогнать фон

[cyklop77]

помогите пожалуста советом

 

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

 

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

 

скажите, можно ли исправить эти 2 косяка малой кровью? меня устроит даже объяснение на словах как можно поступить с проблемой

[ows.nightwolf]

Помоему проблема в том, что background-size: auto auto; для фона и в результате он не масштабируется вместе с макетом. Надо для каждого разрешения подобрать подходящий background-size.

Ну или вот немного легкой наркомании - пример когда фон висит на бордере) тогда уж точно он никуда от контента не денется) Но это ваще танцы с бубном)

[cyklop77]

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

[cyklop77]

и всё таки не получается, регулируя  background-size, решить проблему

 

здесь при отсутствии  background-size и ширине экрана 1140px видно, что узор фона показывается неправильно(видна пустая средняя часть). а здесь при  background-size: 50% 100% узор фона вообще не показывается. что я делаю не так?

Edited February 11, 2015 by cyklop77

[mrnobody]

Мне кажется лучше сделать background-size: 100% auto;

Можно еще попробовать сделать с помощью псевдоэлементов.

[mrnobody]

Хотел попробовать сделать с помощью псевдоэлементов к body, но нужно вставлять их в .container

Вроде ничего не должно поломаться из-за переопределения стилей псевдоэлементов для контейнера.

Вот так получилось

https://jsfiddle.net/mrnobody/y2k82w4n/embedded/result/

Edited February 11, 2015 by mrnobody

[ows.nightwolf]

и всё таки не получается, регулируя  background-size, решить проблему

 

здесь при отсутствии  background-size и ширине экрана 1140px видно, что узор фона показывается неправильно(видна пустая средняя часть). а здесь при  background-size: 50% 100% узор фона вообще не показывается. что я делаю не так?

Когда background-size не задан его значение по умолчанию - auto auto, а значит фон будет иметь размеры оригинального изображения (не вписанного в ваш контейнер), соответственно он не будет растягивтаься/сжиматься под разрешение экрана. Процентное значение в background-size задает размер фона в процентах от размеров самого контейнера, а не рисунка, по этому в случае background-size: 50% 100%  у вас фон просто закрыт блоком .container. Задайте ширину фона в пикселях для каждого из разрешений экрана, а высоту поставьте auto чтоб пропорции не искажались. Как узнать нужную ширину вашего фона:

Ваше фоновое изображение в оригинале имеет ширину 1 642px, и ширину "рабочей" области (красное пространство в центре, на месте которого должен быть блок .container) 1 017px. Если посмотреть bootstrap.min.css то можно увидеть что при ширине экрана от 992 до 1 200px размер блока .container будет составлять 970px - столько же по ширине должно быть наше красное пространство. Так что требуемую ширину фона можно определить по формуле: [ширина оригинала] * [ширина блока .container] / [ширину рабочей области оригинала]. Посчитаем: 1 642 * 970 / 1 017 = 1 566px. В CSS добавляем что-то типа такого:

@media (min-width:992px){   body {      background-size: 1566px auto;   }}

И так посчитать для каждого разрешения.

Edited February 11, 2015 by ows.nightwolf

[cyklop77]

Хотел попробовать сделать с помощью псевдоэлементов к body, но нужно вставлять их в .container

Вроде ничего не должно поломаться из-за переопределения стилей псевдоэлементов для контейнера.

Вот так получилось

https://jsfiddle.net/mrnobody/y2k82w4n/embedded/result/

вот это совсем удачное решение. calc работает даже под иос и андроид несмотря на то, что по справочнику не должен

Edited February 14, 2015 by cyklop77