Domanda

Ho lavorato su questo per un paio d'ore e non riesco a avvolgere la mia testa intorno ad esso. Ho tre immagini, al di sotto, e vorrei che il contenuto del testo di sedersi sulla parte superiore di questi, ma come faccio a farlo?
L'immagine centrale è l'immagine che avrebbe bisogno di ripetere come il contenitore div si espande.

Va bene, mi scuso per la mia mancanza di informazioni, è un po 'tardi e non sto pensando esattamente dritto. Vorrei comprendere un contenitore con le tre immagini. L'altezza minima di questo contenitore sarebbe l'immagine superiore e inferiore. Per quanto il contenuto inizia a traboccare questa altezza minima, l'immagine centrale avrebbe cominciato a ripetere a ospitare per più di altezza.

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

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

In basso: alt text http://files.droplr.com/files/45544730/ INFbt.Page-Bottom.png

È stato utile?

Soluzione

la mia soluzione:

Di solito lo faccio in questo modo: 

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

Di solito, inferiore del div è così piccolo è ok per lasciare vuoto (per aggiungere spaziatura a tutta la progettazione). Inoltre, la dimensione negativa margin-bottom dovrebbe essere: -. (height - what_you_want_to_remain_empty) - vale a dire se l'immagine .box .header ha 540px e si desidera lasciare top 50px vuota, si impostare -490px come ho avuto

In bocca al lupo.

Altri suggerimenti

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>

Dare classe invece e gestire nei tuoi fogli di stile 

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

Dare ad ogni div separato styling background CSS.

ma vorrei suggerire,
Dare background styling per il div di testo, insieme a box-shadow e border.
In questo caso, è necessario solo il centrale immagine.

Avere il codice finora sarebbe utile, ma mi darà un vortice.

Si sta per bisogno di un contenitore per ogni immagine. 

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

Io probabilmente vuole fare la prima immagine circa la stessa dimensione come l'ultima immagine e lasciare che il 2 ° immagine compilare, se necessario.

Credo che in risposta di Seth M, è necessario fornire l'altezza per la parte superiore (testa) e in basso (piedi) div.

allora funzionerà correttamente. 

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

E 'una cosa semplice, che mette i superiore e inferiore le foto come immagini all'interno della scatola, ma sempre primo e l'ultimo. Naturalmente non funziona se si dispone di margini o imbottiture, ma provare a fare anche questo: 

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

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

Che dovrebbe darvi esattamente quello che vuoi, in una sorta di strano modo. Attenzione che i browser più vecchi non supportano queste regole CSS.

Ecco un codice di ful con HTML / CSS utilizzando le immagini hai postato. La parte di intestazione è piuttosto 'alto'. Penso che sia parte del vostro disegno. 

<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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top