CODEWITHSUNDEEP
htmlcssimagerepeat
Alex
Alex

Reputation: 459

make image( not background img) in div repeat?

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>

Upvotes: 21

Views: 164804

Answers (4)

Boopathi
Boopathi

Reputation: 166

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

Upvotes: 12

T.Todua
T.Todua

Reputation: 56401

(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>

Upvotes: 3

Rooster
Rooster

Reputation: 21

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.

Upvotes: 2

gotofritz
gotofritz

Reputation: 3381

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;

Upvotes: 5

Related Questions