Как выровнять фон по обе стороны страницы?

Мне нужно иметь центрированный div с содержимым страницы и повторяющийся фон, который выравнивается отдельно в левой и правой части страницы: What it looks like now . На левой стороне рисунок стрелки должен начинаться там, где заканчивается левая сторона страницы и повторяется до конца левой стороны экрана, и то же самое с правой стороны. С правой стороны оно выровнено правильно, но это совпадение. Текущий код в: this fiddle Как выровнять фон по обе стороны страницы?

HTML:

<body> 
    <div class="container"> 
     <div class="content"> 
      <p> 
       Lorem ipsum dolor sit amet 
      </p> 
     </div> 
    </div> 
</body>

CSS:

* { 
    min-height: 100%; 
    margin: 0; 
    padding: 0; 
} 
body { 
    background-image: url('http://i.imgur.com/mcX3gBy.png'); 
    background-attachment: fixed; 
} 
.container { 
    min-height: 100%; 
} 
.content { 
    margin: 0 auto; 
    width: 150px; 
    background-color: #fff; 
    min-height:100%; 
}

источник

2013-07-27 maciejjo

Ну, это может быть сделано, однако это не будет, что довольно .. Вы должны изменить ваша структура для создания 2-х частей фона (даже в случае с кратким фоном css3 в этом случае это не поможет).

Here the working jsFiddle

Я добавил в .container следующее:

<div class="leftBG"></div> 
<div class="rightBG"></div>

И добавил CSS:

.leftBG{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:50%; 
    height:100%; 
    z-index:1; 
    background:url('http://i.imgur.com/mcX3gBy.png') top right repeat; 
} 

.rightBG{ 
    position:absolute; 
    top:0px; 
    left:auto; 
    right:0px; 
    width:50%; 
    height:100%; 
    z-index:1; 
    background:url('http://i.imgur.com/mcX3gBy.png') top left repeat; 
}

Что это делает в основном делением фона в 2-х частей - слева и справа, каждый имеет свой собственный фон, когда левый фон выравнивается влево и правый фон выравнивается вправо.

источник

2013-07-27 09:20:44

Фон все еще не начинается там, где заканчивается средний блок, он должен выглядеть как [this] (http://i.imgur.com/VNczttR.png) Возможно, правый и левый divs должны заканчиваться не в середине, а по бокам центр div? – maciejjo

Да, но он не выровнен со стороной центра div ... Первый фоновый блок должен начинаться прямо там, где заканчивается средний блок, а не позади него – maciejjo

Я думаю, что решение с правым и левым divs правильно, но они должны заканчиваться на стороны центрального блока, я просто не уверен, как это сделать. – maciejjo

Как выровнять фон по обе стороны страницы?

ответ

Смежные вопросы