Pregunta

He estado trabajando en esto durante un par de horas y parece que no puede envolver mi cabeza alrededor de ella. Tengo tres imágenes, a continuación, y me gustaría que el contenido de texto para sentarse encima de ellos, pero ¿cómo lo hago?
La imagen central es la imagen que se tenga que repetir como se expande el contenedor div.

De acuerdo, me disculpo por mi falta de información, que es un poco tarde y no estoy pensando exactamente recta. Me gustaría comprender un recipiente con las tres imágenes. La altura mínima de este contenedor sería la parte superior y la imagen de fondo. Como contenidos comienza a desbordarse esta altura mínima, la imagen central comenzaría a repetir para dar cabida a más altura.

Top: alt text http://files.droplr.com/files/45544730/INDf3. page.png

Medio repitiendo: alt text http://files.droplr.com/files/45544730/ INE5i.Page-Tile.png

En pocas palabras: alt text http://files.droplr.com/files/45544730/ INFbt.Page-Bottom.png

¿Fue útil?

Solución

mi solución:

Usualmente lo hago de esta manera: 

<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*/}

Por lo general, inferior de div es tan pequeño que está bien dejarlo en blanco (para añadir espaciamiento de diseño de conjunto). Además, el tamaño del negativo margin-bottom debe ser: -. (height - what_you_want_to_remain_empty) - es decir, si la imagen tiene .box .header 540px y desea salir de la parte superior 50px vaciar, podrás configurar -490px ya que tuve

Buena suerte.

Otros consejos

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>

Da clase en lugar y manejarlo en sus hojas de estilo 

<div class='top'>
</div>
<div class='middle'>
</div>
<div class='bottom'>
</div>

Dar a cada div separado estilo background CSS.

pero sugeriría,
Dar background peinar a la div texto, junto con box-shadow y border.
En este caso, necesitará sólo el Medio imagen.

Tener el código hasta ahora sería de gran ayuda, pero voy a darle una turbina.

Usted va a necesitar un contenedor para cada imagen. 

<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;
}

Probablemente me quieren hacer la primera imagen sobre el mismo tamaño que la última imagen y dejar que el relleno de imagen en el segundo, según sea necesario.

Creo que en la respuesta de Seth M, es necesario proporcionar la altura de la parte superior (cabeza) y div inferior (pie).

entonces todo funcionará correctamente. 

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);}

Es una cosa ordenada, lo que pone arriba y abajo las fotografías como imágenes dentro de la caja, pero siempre primero y el último. Por supuesto que no funciona si tiene márgenes o rellenos, pero trate de hacer esto también: 

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

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

Eso debería darle exactamente lo que quiere, en una especie de manera extraña. Ten en cuenta que los navegadores antiguos no apoyarán estas reglas CSS.

Aquí hay un código de cumplir con HTML / CSS usando las imágenes que posteaste. La porción de cabeza es más bien 'alto'. Supongo que es parte de su diseño. 

<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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top