+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Moving website background Question (/showthread.php?tid=4000176)
Moving website background Question - fieldy2012 - Jan 16, 2014
Hi,
I stumble upon a website which has a moving background..
actualy i thik=nk its flash.. but when u right click the background.. its just a jpeg file..
Does anyone of u know how to do that? thanks..
* - SKUZZ - Jan 16, 2014
Could you possibly post a link of the site that does this?
It might be using Javascript to switch jpeg files are something, I'm not positive at all on this though.
* - ~Dec - Jan 16, 2014
CSS3 transforms/keyframe animations is used for this sort of thing.
Here's an example of an infinitely slide up/down image:
HTML:
PHP Code
<?php
<div class="element-with-background">
<div class="background"></div>
<div class="content">
[b]<!--[/b] content goes here -->
</div>
</div>
CSS (without vendor prefixes, run this through autoprefixer):
PHP Code
<?php
.element-with-background {
position: relative;
}
.background {
position: absolute;
top: 0; left: 0;
height: 4200px;
background: url('../img/image.png') repeat top center;
z-index: 1;
animation: background-slide 200s linear infinite;
}
.content {
position: relative;
z-index: 2;
}
@keyframes background-slide {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -2100px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}