làm cho hình ảnh (không phải nền img) trong div lặp lại?

Question

Tôi đang cố gắng lặp lại hình ảnh trong div và không có hình nền nhưng chưa tìm ra cách. Bạn có thể vui lòng chỉ cho tôi một giải pháp?

Mã của tôi trông như thế này:

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

Answer 1

Bạn phải sử dụng đến repeat-y như style="background-repeat:repeat-y;width: 200px;" thay vì style="repeat-y".

Hãy thử điều này bên trong thẻ hình ảnh hoặc bạn có thể sử dụng css bên dưới cho div

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

Answer 2

Không phải với CSS bạn không thể. Bạn cần sử dụng JS. Một ví dụ nhanh chóng sao chép img vào nền:

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

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

Hoặc bạn thực sự có thể lặp lại hình ảnh, nhưng bao nhiêu lần?

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

Answer 3

Nó có lẽ sẽ dễ dàng hơn để chỉ giả nó bằng cách sử dụng một div. Chỉ cần chắc chắn rằng bạn thiết lập chiều cao nếu nó rỗng để nó thực sự có thể xuất hiện. Ví dụ: bạn muốn nó cao 50px đặt chiều cao div thành 50px.

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

Và trong biểu định kiểu của bạn, chỉ cần thêm nền và các thuộc tính, chiều cao và chiều rộng và vị trí bạn đã nghĩ đến.

Answer 4

(DEMO)
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%; } 

và

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