Фон повторяется только с одной стороны макета сайта, по центру контента?

Как я могу бесконечно повторять фоновый цвет/изображение только на одной стороне моего макета сайта и удерживать содержимое в центре?

Кажется, лучший метод — с таблицами, так как он будет работать даже в IE6, однако есть ли способ сделать это без таблиц и javascript и работать как минимум в IE7+?

Метод с divs/display:table вообще не работает в IE,

<style type="text/css">

*{
margin:0;
padding:0;
}

/* table method */

.table-container{
margin-top:20px;
border:0;
border-collapse:collapse;
width:100%;
height:100px;
}

.table-container .left{
background:transparent;
}

.table-container .center{
width:960px;
background:#ddd;
vertical-align:top;
}

.table-container .center div{
margin:0 auto;
width:960px;
}

.table-container .right{
width:auto;
background:#ccc;
}

/* div method */

.div-container{
display:table;
margin-top:20px;
border:0;
width:100%;
height:100px;
}

.div-container .left{
display:table-cell;
background:transparent;
}

.div-container .center{
display:table-cell;
width:960px;
margin:0 auto;
background:#ddd;
vertical-align:top;
}

.div-container .right{
display:table-cell;
width:auto;
background:#ccc;
}

</style>


<table class="table-container">
<tr>
<td class="left">&nbsp;</td>
<td class="center"><div>Table method : This space must be centered</div></td>
<td class="right">&nbsp;</td>
</tr>
</table>

<div class="div-container">
<div class="left">&nbsp;</div>
<div class="center">Div method : This space must be centered</div>
<div class="right">&nbsp;</div>
</div>

css internet-explorer css-tables
person user780756    schedule 02.06.2011    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вы можете добиться интересных эффектов, таких как цвет фона половины экрана, используя абсолютную позицию. И есть более простые способы центрировать текст, чем использование макета display: table, который я также показал в своем CSS.

Вот рабочий пример JSFiddle, и я сделал все возможное, чтобы объяснить CSS в комментариях ниже.

Вот код:

CSS

.content {
    margin: auto;         //use these to center the content
    position: relative:   //position relative, so the absolute div is positioned relative to this div
    text-align: center;   //use these to center the content
    width: 60%;
}

.content p {
    position: relative;   //position relative so we can set a z-index
    z-index: 1;           //z-index is higher than that of the background so it appears above  
}

.background {
    background-color: #777;
    height: 100%;
    left:0;               //we want the left of the div to be 0px from the left of its container div
    position: absolute;   //position absolute, so we can put it anywhere we want
    top: 0;               //we want the top of the div to be 0px from the top of the container div
    width: 50%;
    z-index: 0;           //we want the z-index to be lower than the text
}


HTML

<div class="content">
    <p>...text...</p>
    <div class="background"></div>
</div>


Наслаждайтесь

person My Head Hurts    schedule 02.06.2011

arrow_upward
0
arrow_downward

Вот более современный подход (старый ответ был от июня 2011 года). Все основные браузеры теперь поддерживают несколько фоновых изображений.

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

.full-width-container{
  background-image:
    url('some_long_image_600Wx100H.jpg'),
    url('some_long_image_600Wx100H.jpg');
  background-position:
    calc(50% + (600px * 0.5)) 0;
    calc(50% + (600px * 1.5)) 0,
    ;
  background-repeat: repeat-y;
}

Примечание. 600 пикселей — это ширина изображения. Приведенный выше пример покрывает экран шириной 1200 пикселей или левую половину монитора шириной 2400 пикселей.

В идеале у вас должно быть довольно широкое изображение, поэтому вам не нужно использовать так много повторно используемых фоновых изображений. Если бы у вас было изображение шириной всего 300 пикселей, оно выглядело бы так.

.full-width-container{
  background-image:
    url('some_long_image_300Wx100H.jpg'),
    url('some_long_image_300Wx100H.jpg'),
    url('some_long_image_300Wx100H.jpg'),
    url('some_long_image_300Wx100H.jpg');
  background-position:
    calc(50% + (600px * 0.5)) 0;
    calc(50% + (600px * 1.5)) 0,
    calc(50% + (600px * 2.5)) 0,
    calc(50% + (600px * 3.5)) 0,
    ;
  background-repeat: repeat-y;
}

Я также не уверен, как загрузка нескольких BGS, даже с одним и тем же изображением, повлияет на частоту кадров. Я бы предположил, что это будет минимально.

person Mario Olivio Flores    schedule 05.02.2016