Фон повторяется только на одной стороне макета сайта, содержание по центру? - PullRequest
Новая
       7

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

2 голосов
/ 02 июня 2011

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

Лучше всего использовать таблицы, так как он будет работать даже в IE6, однако есть ли способ сделать это без таблиц и JavaScript и работать по крайней мере в IE7 +?

Метод с divs / display: таблица вообще не работает в 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>

Ответы [ 2 ]

4 голосов
/ 02 июня 2011

Вы можете получить крутые эффекты, такие как цвета фона на половину экрана, используя абсолютное положение.И есть более простые способы центрировать текст, чем использовать макет 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>

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

0 голосов
/ 05 февраля 2016

Вот более актуальный подход (старый ответ был с июня 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;
}

Примечание: 600px - это ширина изображения. Приведенный выше пример будет охватывать экран с разрешением 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;
}

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

...