.bg
{
width: 100vw;
height: 100vh;
}<div class="bg">
<img src="https://www.roadsbridges.com/sites/rb/files/styles/content_type_page/public/Traffic_Safety_64.jpg?itok=a9CICO90" alt=""/>
</div>Hi I wanna use the road image as a background but I want it too loop across the screen over and over infinitely as if the road is moving. What CSS or ReactJS code can I use to do that?
There are different ways to do it, look at this codepen https://codepen.io/konker/pen/Qozzrj
#road {
opacity:.9;
width: 120vw;
height: 20vw;
min-height:200px;
background: #888;
background-image: linear-gradient(
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.2) 35%,
rgba(80, 80, 80, 0.2) 50%,
rgba(30, 30, 30, 0.4) 70%,
rgba(60, 60, 60, 0.5) 87%,
rgba(180, 180, 180, 0.5) 100%
),
url("image url");
background-size: 19vw auto;
transform-origin: center top;
transform: rotateX(45deg) translate(-20vw);
animation: stripemove 0.2s linear infinite;
}
@keyframes stripemove {
to {
transform: rotateX(45deg) translate(0vw);
}
}
Use the animation property like:
.bg img {
height: 25vh;
width: 200vw;
position: absolute;
left: 0;
bottom: 0;
z-index: 10;
animation: moving 3s linear infinite 1s;
}
@keyframes moving {
100% {
transform: translateX(-100vw);
}
}
I think you can use css property tranform-y and animations
This will definitely take that image and run it over and over again. without animating it.
.bg
{
background: url("https://www.roadsbridges.com/sites/rb/files/styles/content_type_page/public/Traffic_Safety_64.jpg?itok=a9CICO90");
width: 100vw;
height: 100vh;
background-size: 300px 100px;
}<div class="bg">
</div>