make image( not background img) in div repeat?

前端 未结 4 795
我寻月下人不归
我寻月下人不归 2021-02-19 02:03

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:

相关标签:
4条回答
  • 2021-02-19 02:29

    You have use to 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;
    }
    
    0 讨论(0)
  • 2021-02-19 02:37

    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.

    0 讨论(0)
  • 2021-02-19 02:45

    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;
    
    0 讨论(0)
  • 2021-02-19 02:46

    (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>
    
    0 讨论(0)
提交回复
热议问题