divの中にある背景画像のない画像をリピートさせたいのですが、方法がわかりません。解決策をご教示いただけないでしょうか?
私のコードは次のようなものです:
<div id="rightflower">
<img src="/image/layout/lotus-dreapta.png" style="repeat-y; width: 200px;"/>
</div>
repeat-yは、「style="repeat-y"」ではなく、「style="background-repeat:repeat-y;width: 200px;"」として使用されていますね。
これをimageタグの中で試すか、divに以下のcssを使用することができます。
.div_backgrndimg
{
background-repeat: repeat-y;
background-image: url("/image/layout/lotus-dreapta.png");
width:200px;
}
CSSでは無理です'。JSを使う必要があります。 imgを背景にコピーする簡単な例です:
var $el = document.getElementById( 'rightflower' )
, $img = $el.getElementsByTagName( 'img' )[0]
, src = $img.src
$el.innerHTML = "";
$el.style.background = "url( " + src + " ) repeat-y;"
あるいは、実際に画像を繰り返すこともできますが、何回繰り返すのでしょうか?
var $el = document.getElementById( 'rightflower' )
, str = ""
, imgHTML = $el.innerHTML
, i, i2;
for( i=0,i2=10; i<i2; i++ ){
str += imgHTML;
}
$el.innerHTML = str;
([DEMO](
))。 < br /> **コード**:.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%; }
と。
<div>
<div class="backimage"></div>
YOUR OTHER CONTENTTT
</div>