make image( not background img) in div repeat?

Question

I'm trying to repeat-y an image that's in a div and no background image but haven't figured how. Could you please point me to a solution?

My code looks like this:

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

The short answer is you can't - you want to use a background image for this — Pekka, Dec 30 '11 at 11:40
So, I could repeat the image by setting it as a background image for the div? Would this let me to align the image? — Alex, Dec 30 '11 at 11:46

score 12 · Accepted Answer · edited Apr 20 '22 at 17:25

12

You have use repeat-y as style="background-repeat:repeat-y;width: 200px;" instead of style="repeat-y".

Try this inside the image tag or you can use the below css for the div

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

edited Apr 20 '22 at 17:25

Omar

11,783
21
84
114

answered Dec 30 '11 at 12:24

Boopathi

166
5

score 5 · Answer 2 · answered Dec 30 '11 at 11:47

Not with CSS you can't. You need to use JS. A quick example copying the img to the background:

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

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

Or you can actually repeat the image, but how many times?

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

obviously you CAN change it with CSS if you remove the img element and put the image in the background, my answer was based on the assumption you didn't want to / couldn't change the markup — gotofritz, Dec 30 '11 at 15:25

score 4 · Answer 3 · edited Mar 26 '21 at 02:23

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

and

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

edited Mar 26 '21 at 02:23

parsecer

4,758
13
71
140

answered May 18 '15 at 09:38

T.Todua

53,146
19
236
237

score 2 · Answer 4 · answered Dec 30 '11 at 12:49

It would probably be easier to just fake it by using a div. Just make sure you set the height if its empty so that it can actually appear. Say for instance you want it to be 50px tall set the div height to 50px.

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

And in your style sheet just add the background and its properties, height and width, and what ever positioning you had in mind.

make image( not background img) in div repeat?

4 Answers4

Linked