cannot get my flexible animated background reflection to work

StackOverflow https://stackoverflow.com/questions/22849397

Question

Alright so I've searched around for a loooong while and fiddled around with this and I cannot seem to get it working. So far as I know I cannot add a css reflection to a background and I am using the background-image property to create an animated BG. I want that BG to reflect onto my surface which is a DIV box placed above the BG and set at a lower opacity. In order to create the reflection im using two different background-image properties one below the other with the image reversed and the exact same animation.

THE ISSUE: when the browser window changes sizes in height the bottom animation wont move in a manner that is consistent with the top to look like a reflection (I basically want both points in the image to connect and stay lined up despite the images getting cut off by the overflow: hidden function)

is there any way I can do this? or have the background just start cutting off from the top instead of the bottom where the reflection connects so its always aligned? or maybe im just going about it wrong.....

NOTE I just threw in a random bg off google so people can see it. in the animation it would be flipped 180 degrees to simulate reflection.**

EDIT: Demo fiddle

CSS

 * {
     padding: 0;
     margin: 0;
 }
 /*bg animation loop */
 @keyframes animatedBg {
     from {
         background-position: -200px 0px;
     }
     to {
         background-position: 1080px 0px;
     }
 }
 /*if you have multiple things to position separate with a comma ex: : -200px 0px, 90px 80px,etc*/
 @-webkit-keyframes animatedBg {
     from {
         background-position: -200px 0px;
     }
     to {
         background-position: 1080px 0px;
     }
 }
 @-ms-keyframes animatedBg {
     from {
         background-position: -200px 0px;
     }
     to {
         background-position: 1080px 0px;
     }
 }
 @-moz-keyframes animatedBg {
     from {
         background-position: -200px 0px;
     }
     to {
         background-position: 1080px 0px;
     }
 }
 #bgbox {
     position: absolute;
     top: 0;
     height:2000px;
     width: 2000px;
     max-width: 100%;
     max-height: 100%;
 }
 .bg {
     z-index: -20;
     position: fixed;
     top: 0;
     background-image: url(http://miriadna.com/desctopwalls/images/max/Orange-space.jpg);
     width: 100%;
     height: 70%;
     max-height: 70%;
     max-width: 100%;
     background-position: -200px 0px, 0px 0px, 0px 0px;
     background-repeat: repeat-x;
     animation: animatedBg 90s linear infinite;
     -ms-animation: animatedBg 90s linear infinite;
     -moz-animation: animatedBg 90s linear infinite;
     -webkit-animation: animatedBg 90s linear infinite;
     overflow: hidden;
 }
 .bg2 {
     z-index: -22;
     position: fixed;
     top: 30%;
     bottom: -0.2%;
     background-image: url(http://miriadna.com/desctopwalls/images/max/Orange-space.jpg);
     width: 100%;
     height: 100%;
     max-height: 100%;
     max-width: 100%;
     background-position: 0px 0px, 0px 0px, 0px 0px;
     background-repeat: repeat-x;
     animation: animatedBg 90s linear infinite;
     -ms-animation: animatedBg 90s linear infinite;
     -moz-animation: animatedBg 90s linear infinite;
     -webkit-animation: animatedBg 90s linear infinite;
     overflow: hidden;
 }
 /*bg animation loop end */
 #midground {
     position: fixed;
     bottom: 0;
     left: 0;
     height: 950px;
     max-height: 30%;
     width: 2000px;
     maxwidth: 100%;
     background-color: rgba(0, 0, 0, 0.71)
 }

and here is the HTML:

HTML

<body>
    <div id="bgbox">
        <div class="bg"></div>
        <div class="bg2"></div>
    </div>
    <div id="midground"></div>
</body>

any help is greatly appreciated!

Was it helpful?

Solution

If you use two different animations, and have two different images (one the reflection of the other) this should work: Updated Fiddle

The main key was adjusting the height of your lower image container, so it wasn't overlapped by the top div. Setting it to height: 30%, then attaching the bg image to the bottom of the first div and the top of the second, and having the equivalent animations seems to do it.

There are now animatedBgTop and animatedBgBottom keyframe sets.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top