3 div в качестве фона - PullRequest
Новая
       77

3 div в качестве фона

0 голосов
/ 31 марта 2010

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

Хорошо, я прошу прощения за недостаток информации, немного поздно, и я не совсем думаю об этом. Я хотел бы включить контейнер со всеми тремя изображениями. Минимальная высота этого контейнера будет сверху и снизу изображения. Когда содержимое начинает переполнять эту минимальную высоту, среднее изображение начинает повторяться, чтобы соответствовать большей высоте.

Top: альтернативный текст http://files.droplr.com/files/45544730/INDf3.Page.png

Средняя повторяющаяся: альтернативный текст http://files.droplr.com/files/45544730/INE5i.Page-Tile.png

Дно: альтернативный текст http://files.droplr.com/files/45544730/INFbt.Page-Bottom.png

Ответы [ 7 ]

3 голосов
/ 31 марта 2010 
TRY FOLLOWING

<div style="background:url(../top.png) no-repeat;">
  Top
</div>

<div style="background:url(../middle.png)">
  Middle:
</div>

<div style="background:url(../bottom.png) no-repeat;">
  Bottom
</div>

Вместо этого дайте класс и используйте его в таблицах стилей

2 голосов
/ 31 марта 2010 
<div class='top'>
</div>
<div class='middle'>
</div>
<div class='bottom'>
</div>

Дайте каждому div отдельному background стилю CSS.

Но я бы предложил,
Дать background стилю тексту div вместе с box-shadow и border.
В этом случае вам потребуется только изображение middle .

1 голос
/ 31 марта 2010

мое решение:

Обычно я делаю это так: 

<div class="box">
  <span class="header"></span>
  content
  <span class="bottom"></span>
</div>

CSS: 

.box { background: url(middle.png) repeat-y left top; }
  .box .header { background: url(top.png) no-repeat; display: block; margin-bottom: -480px; /* +set height and width */}
  .box .bottom { background: url(bottom.png) no-repeat; display: block; /*+ height and width*/}

обычно нижняя часть div настолько мала, что можно оставить ее пустой (чтобы добавить интервал ко всему дизайну). Кроме того, отрицательный размер нижнего поля должен быть: - (height - what_you_want_to_remain_empty) - т. Е. Если ваше .box .header изображение имеет 540px и вы хотите оставить верхнюю 50px пустой, вы установите -490px как и я.

Удачи.

0 голосов
/ 31 марта 2010

Вот полный код с HTML / CSS с использованием размещенных вами изображений. Часть заголовка довольно «высокая». Я предполагаю, что это часть вашего дизайна. 

<html>
<head>
<style type="text/css">
div.top, div.body, div.footer {
margin: 0 auto;
width: 844px;
color: #ffffff;
background-color: #666666;
padding-left: 10px; /* edit accordingly */
}

div.top {
background: url(http://files.droplr.com/files/45544730/INDf3.Page.png) no-repeat;
height: 426px;
}
div.body {
background: url(http://files.droplr.com/files/45544730/INE5i.Page-Tile.png) repeat-y;
height: 200px;
}
div.footer {
background: url(http://files.droplr.com/files/45544730/INFbt.Page-Bottom.png) no-repeat left bottom;
height: 100px;
}
</style>
</head>
<body>
<div class="top">top
</div>
<div class="body">body
</div>
<div class="footer">footer
</div>
</body>
</html>
0 голосов
/ 31 марта 2010 
div.box:before {content:url(top.png);}
div.box {
  background-image:url(middle.png) repeat-y;
  width:?;
  margin:0;
  padding:0;
}
div.box:after {content:url(bottom.png);}

Это изящная вещь, которая помещает верхние и нижние картинки как изображения внутри рамки, но всегда первым и последним. Конечно, это не работает, если у вас есть поля или отступы, но попробуйте сделать это тоже: 

div.box > div {padding:10px;}

<div class="box"><div>
  Content goes here
</div></div>

Это должно дать вам именно то, что вы хотите, каким-то странным образом. Помните, что старые браузеры не будут поддерживать эти правила CSS.

0 голосов
/ 31 марта 2010

я думаю, что в ответе Сета М вам нужно указать высоту для верхнего (головы) и нижнего (ноги) деления.

тогда он будет работать правильно.

0 голосов
/ 31 марта 2010

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

Вам понадобится контейнер для каждого изображения. 

<div class="head"></div>
<div class="text">TEXT HERE</div>
<div class="foot"></div>

- CSS - 

div.head { 
  background-image:url('top.png');
  background-repeat:no-repeat;
}
div.text {
  background-image:url('middle.png');
  background-repeat: repeat-y;
}
div.foot {
  background-image:url('bottom.png');
  background-repeat:no-repeat;
}

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

...