CSS - расположение фонового изображения на жидком макете - PullRequest
Новая
       5

CSS - расположение фонового изображения на жидком макете

1 голос
/ 13 июля 2010

поэтому макет выглядит следующим образом: 

<div style="width: 100%;" class="container">

  <div class="col1" style="width:30%;float:left;">  
   column 1
  </div>

  <div class="col2" style="width:70%;float:left">  
   column 2
  </div>

</div>

Я хочу сделать div.col1 другим цветом, поэтому для этого я использую фоновое изображение с повторением по вертикали на div.container.Проблема в том, что этот контейнер жидкий, и я не знаю, как расположить изображение.

Я пробовал что-то подобное, но оно не работает при изменении размера окна браузера: 

.container{background: transparent url(images/bg.png) repeat-y -70% top;

Есть ли способы сделать это?

1 Ответ

1 голос
/ 13 июля 2010

Я не знаю всех ваших требований, но это будет работать лучше, если вы можете установить background-color из .container на то, что вы хотите, чтобы ваш левый столбец был, а затем использовать повторное изображение, чтобы заполнить правый столбец,Причина в том, что фоновое позиционирование не может быть сделано справа, только слева.Так что-то вроде: 

.container{background: #ffffff url(images/bg.png) repeat-y 30% top}

Где #ffffff представляет цвет левого столбца, а bg.png правый столбец.Если вам действительно нужно левое, чтобы быть png, то вам, вероятно, понадобится вторая обертка вокруг плавающих div.Что-то вроде: 

<div style="width: 100%;" class="container">
<div class="inner">
   <div class="col1" style="width:30%;float:left;">  
     column 1
   </div>

   <div class="col2" style="width:70%;float:left">  
     column 2
   </div>
</div>
</div>

Установите оболочку inner (это может быть просто сплошной цвет, а не повторяющееся изображение): 

.inner{background: url(images/bgright.png) repeat-y 30% top}

И ваш контейнер: 

.container{background: url(images/bgleft.png) repeat-y left top}

Разрыв в 30% от inner позволит фону левого 30% столбца просвечивать от container.

...