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> <img src="/image/layout/lotus-dreapta.png"/> </div> 
2

4 Answers

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

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

(DEMO)
Codes:

.backimage { width:99%; height:98%; position:absolute; background:transparent url("") repeat scroll 0% 0%; } 

and

<div> <div></div> YOUR OTHER CONTENTTT </div> 

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> <div></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.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy