Skip to content

Instantly share code, notes, and snippets.

@yakubu234

yakubu234/Animated-loop-background-image.php

Last active January 2, 2020 11:26
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yakubu234/f8ff32e42e653049355f0afe3cdcdddd to your computer and use it in GitHub Desktop.
Save yakubu234/f8ff32e42e653049355f0afe3cdcdddd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Animated-loop-background-image.php
<html>
<head>
<title>Animated loop background image/ slidding image </title>
<style>
html, body {
margin: 0; padding: 0;
}
.animated-transition {
background: gray url(https://subtlepatterns.com/patterns/geometry2.png) repeat 0 0;
/* #if the url is not working get the picture from this link https://drive.google.com/open?id=1fX2KWqcpbzMk4m20VgQhTAjEunqcEB6q */
width: 100%;
margin: 0;
text-align: center;
height: 300px;
padding-top: 120px;
box-sizing: border-box;
-webkit-animation: slide 20s linear infinite;
}
.animated-transition h1 {
font-family: sans-serif;
}
@-webkit-keyframes slide {
from { background-position: 0 0; }
to { background-position: -400px 0; }
}
</style>
</head>
<body>
<div class="animated-transition">
<h1>Yoir background text will be here and in the center </h1>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment