Repeating an image horizontally (non-background image)

Question

I can't get this image to repeat horizontally. Note it is not a background image.

https://jsfiddle.net/gcetx8kh/

HTML:

    <img id="rd" src="http://us.cdn3.123rf.com/168nwm/eriksvoboda/eriksvoboda1411/eriksvoboda141100036/33498305-asphalt-road-texture-with-white-and-yellow-stripes.jpg">

CSS:

#rd {
    position: absolute;
    height: 50px;
    width: 50px;
    top: 300px; 
    background-repeat: repeat-x;
}

Answer 1

Unfortunately, background-repeat: repeat-x; will not work with the img tag. Therefore, you will need to add a new div and apply the image as a background image.

Try like this: Demo

<div id="rd"></div>

CSS:

#rd {
    position: absolute;
    height: 50px;
    width: 100%;
    top: 300px;
    background: url(http://us.cdn3.123rf.com/168nwm/eriksvoboda/eriksvoboda1411/eriksvoboda141100036/33498305-asphalt-road-texture-with-white-and-yellow-stripes.jpg) center repeat-x;
    background-size: auto 100%;
}

Edit: Demo with fade on both sides:

#rd {   
    height: 50px;
    width: 100%;
    top: 300px;
    background: url(http://us.cdn3.123rf.com/168nwm/eriksvoboda/eriksvoboda1411/eriksvoboda141100036/33498305-asphalt-road-texture-with-white-and-yellow-stripes.jpg) center repeat-x;    
    background-size: auto 100%;    
    position: relative;
    display: inline-block;
}
    
#rd:before {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);      
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(49%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));     
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);      
    background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);     
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);    
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);     
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);   
}