web-dev-qa-db-fra.com

faire l'image (pas le fond img) en répétition div?

J'essaie de répéter une image qui est dans un div et sans image d'arrière-plan mais je n'ai pas compris comment. Pourriez-vous me signaler une solution?

Mon code ressemble à ceci:

<div id="rightflower">
<img src="/image/layout/Lotus-dreapta.png" style="repeat-y; width: 200px;"/> 
</div>
htmlcssimagerepeat
14
douaberigoale

Vous avez l'habitude de repeat-y comme style="background-repeat:repeat-y;width: 200px;" au lieu de style="repeat-y".

Essayez ceci à l'intérieur de la balise image ou vous pouvez utiliser le css ci-dessous pour le div

.div_backgrndimg
{
    background-repeat: repeat-y;
    background-image: url("/image/layout/Lotus-dreapta.png");
    width:200px;
}
6
Boopathi

( DÉMO )
Codes :

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

et

<div>
    <div class="backimage"></div>
    YOUR OTHER CONTENTTT
</div>
3
T.Todua

Pas avec CSS, vous ne pouvez pas. Vous devez utiliser JS. Un exemple rapide de copie de l'img en arrière-plan:

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

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

Ou vous pouvez réellement répéter l'image, mais combien de fois?

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

Il serait probablement plus facile de le simuler en utilisant un div. Assurez-vous simplement de définir la hauteur si elle est vide afin qu'elle puisse réellement apparaître. Supposons, par exemple, que vous souhaitiez une hauteur de 50 pixels. Réglez la hauteur de div sur 50 pixels.

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

Et dans votre feuille de style, ajoutez simplement l'arrière-plan et ses propriétés, la hauteur et la largeur, et le positionnement que vous aviez en tête.

2
Rooster