2011-12-30 13 views
13

Sto provando a ripetere-un'immagine che è in un div e senza immagine di sfondo ma non ho capito come. Potresti per favore indicarmi una soluzione?crea immagine (non background img) in div repeat?

Il mio codice simile a questo:

<div id="rightflower"> 
<img src="/image/layout/lotus-dreapta.png" style="repeat-y; width: 200px;"/> 
</div> 
+5

La risposta breve è che non è possibile - si desidera utilizzare un'immagine di sfondo per questo –

+0

Così, ho potuto ripeti l'immagine impostandola come immagine di sfondo per il div? Questo mi permetterebbe di allineare l'immagine? – mwentosana

risposta

6

Hai uso di repeat-y come style="background-repeat:repeat-y;width: 200px;" invece di style="repeat-y".

Prova questa all'interno del tag immagine o è possibile utilizzare il CSS di seguito per il div

.div_backgrndimg 
{ 
    background-repeat: repeat-y; 
    background-image: url("/image/layout/lotus-dreapta.png"); 
    width:200px; 
} 
1
Non

con i CSS non è possibile. Devi usare JS. Un esempio veloce copiando l'IMG allo sfondo:

var $el = document.getElementById('rightflower') 
    , $img = $el.getElementsByTagName('img')[0] 
    , src = $img.src 

$el.innerHTML = ""; 
$el.style.background = "url(" + src + ") repeat-y;" 

Oppure si può effettivamente ripetere l'immagine, ma quante volte?

var $el = document.getElementById('rightflower') 
    , str = "" 
    , imgHTML = $el.innerHTML 
    , i, i2; 
for(i=0,i2=10; i<i2; i++){ 
    str += imgHTML; 
} 
$el.innerHTML = str; 
+0

ovviamente puoi modificarlo con CSS se rimuovi l'elemento img e metti l'immagine sullo sfondo, la mia risposta era basata sul presupposto che non volevi/non potessi cambiare il markup – gotofritz

+0

Vorrei che il tosse mi stalking smetterebbe di svendere tutto ciò che pubblico – gotofritz

2

Probabilmente sarebbe più facile da solo fingere utilizzando un div. Assicurati di impostare l'altezza se è vuota in modo che possa effettivamente apparire. Per esempio, se vuoi che sia alto 50px, imposta l'altezza div a 50px.

<div id="rightflower"> 
<div id="divImg"></div> 
</div> 

E nel foglio di stile basta aggiungere lo sfondo e le sue proprietà, altezza e larghezza, e quale posizionamento mai avevate in mente.

3

(DEMO)
Codici:

.backimage {width:99%; height:98%; position:absolute; background:transparent url("http://upload.wikimedia.org/wikipedia/commons/4/41/Brickwall_texture.jpg") repeat scroll 0% 0%; } 

e

<div> 
    <div class="backimage"></div> 
    YOUR OTHER CONTENTTT 
</div>