как сверстать такое?

[stan07]

Здравствуйте  уважаемые форумчане!

 

 

Подскажите, пожалуйста, как сверстать так чтобы при сужения окна браузера боковые картинки ”заежали” за видимую часть окна, а при увеличении ширины центральная часть растягивалась? 

[pangurban]

Так?

[DivMan]

А может так http://jsfiddle.net/0s4fzu49/1/ ???

[stan07]

Боковые вертикальные панели - это две картинки(типа бекграунд) которые должны стоять по бокам и на маленьких мониторах "заезжают" под контент(белый блок), а на больших видны.

 

Edited October 21, 2014 by stan07

[Great Rash]

Блок посередине фиксированный по ширине или резина?

[stan07]

Блок посередине фиксированный по ширине или резина?

резина

[Great Rash]

http://codepen.io/GreatRash/pen/wtmpd

[stan07]

http://codepen.io/GreatRash/pen/wtmpd

Похоже но не то )

Вот я сделал что то похожее только правая боковая  панель не "заезжает" под контент - http://web-verstka.com.ua/t/

Edited October 22, 2014 by stan07

[Great Rash]

Похоже но не то )

Чем подробнее вы объясните проблему, тем быстрее вам помогут. 

[stan07]

 

Похоже но не то )

Чем подробнее вы объясните проблему, тем быстрее вам помогут. 

 

Зайдите на эту страницу - http://web-verstka.com.ua/t/  и уменьшите страницу браузера и посмотрите на правую панель\картинку, также должна "прятаться" и левая  панель\картинка,  у меня это не получается

Edited October 22, 2014 by stan07

[Great Rash]

А в моём примере картинки прячутся с обеих сторон. Тогда почему он вам не подходит? Потому что картинки не ваши?

[Switch74]

в примере ТС страница то не резина

а так  у Great Rash вроде все норм

[stan07]

А в моём примере картинки прячутся с обеих сторон. Тогда почему он вам не подходит? Потому что картинки не ваши?

В вашем примере боковые картинки резиновые и уменьшаются вместе с контейнером, а мне надо чтобы на определенной ширине, например 1000px, контент переставал сужатсяи боковые картинки "заезжали" под контент.

Edited October 22, 2014 by stan07

[Great Rash]

В вашем примере боковые картинки резиновые и уменьшаются вместе с контейнером, а мне надо чтобы на определенной ширине, например 1000px, контент переставал сужатсяи боковые картинки "заезжали" под контент.

Ну так подумайте немного самостоятельно и уберите не нужные вам свойства из моего примера. 

[stan07]

 

В вашем примере боковые картинки резиновые и уменьшаются вместе с контейнером, а мне надо чтобы на определенной ширине, например 1000px, контент переставал сужатсяи боковые картинки "заезжали" под контент.

Ну так подумайте немного самостоятельно и уберите не нужные вам свойства из моего примера.

Подредоктировал ваш код и все равно центальная часть сужается дааже когдо ширена окна меньше 1000px.

вот код:

html, body {  height: 100%;  margin: 0;  padding: 0;}.left, .right {  position: fixed;  top: 0;  bottom: 0;  width: 15%;}.left {  left: 0;    background-image: url('http://d1oi7t5trwfj5d.cloudfront.net/74/a1/e09699d74710b731c65d183ba718/the-simpsons-the-yellow-king.jpg');  -webkit-background-size: cover;  background-size: cover;  background-position: 0 0;}.right {  right: 0;    background-image: url('http://d1oi7t5trwfj5d.cloudfront.net/74/a1/e09699d74710b731c65d183ba718/the-simpsons-the-yellow-king.jpg');  -webkit-background-size: cover;  background-size: cover;  background-position: 100% 0;}.middle {  position: relative;  z-index: 1;  min-width: 1000px;  min-height: 100%;  margin: 0 auto;  }html, body {  height: 100%;  margin: 0;  padding: 0;}.left, .right {  position: fixed;  top: 0;  bottom: 0;  width: 15%;}.left {  left: 0;    background-image: url('http://d1oi7t5trwfj5d.cloudfront.net/74/a1/e09699d74710b731c65d183ba718/the-simpsons-the-yellow-king.jpg');  -webkit-background-size: cover;  background-size: cover;  background-position: 0 0;}.right {  right: 0;    background-image: url('http://d1oi7t5trwfj5d.cloudfront.net/74/a1/e09699d74710b731c65d183ba718/the-simpsons-the-yellow-king.jpg');  -webkit-background-size: cover;  background-size: cover;  background-position: 100% 0;}.middle {  position: relative;  z-index: 1;  min-width: 1000px;  min-height: 100%;  margin: 0 auto;  } 

HTML тот же

Edited October 22, 2014 by stan07

[Serg@NT]

Сделайте одну общую картинку в качестве фона тега body.

Контент поместите в блок с примерно таким стилем:

body {    background: <общая картинка>;    box-sizing: border-box;    min-width: 1010px;}.middle {   box-sizing: border-box;    margin: 0 auto;    max-width: 1280px;    min-width: 1000px;    width: 99%;}

Edited October 22, 2014 by Serg@NT

[Bassline]

ТС похоже хочет провернуть такую штуку без ограничения максимального размера контейнера при минимальной в 1000px. Такое в принципе невозможно. Что бы картинки заезжали с обеих сторон нужно автоматом выравнивать контейнер по центру без отступов и полей, иначе отступы слева не будут давать примкнуть контейнеру к краю экрана, соответственно картинка полностью не заедет за левый край на ширине меньшей, чем минимальная ширина контейнера.

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

[stan07]

ТС похоже хочет провернуть такую штуку без ограничения максимального размера контейнера при минимальной в 1000px. Такое в принципе невозможно. Что бы картинки заезжали с обеих сторон нужно автоматом выравнивать контейнер по центру без отступов и полей, иначе отступы слева не будут давать примкнуть контейнеру к краю экрана, соответственно картинка полностью не заедет за левый край на ширине меньшей, чем минимальная ширина контейнера.

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

Понятно

 

всем спасибо за попытку объяснить )