Repeat an image horizontally (non-background image)
I just can't get this road image to repeat horizontally, it's not a background image and I'm stuck with that.
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;
}
+3
source to share
2 answers
Try it 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 out 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);
}
+6
source to share