Trying to animate image behind backgound image

HTML & CSS
1

I would like to have the numerals move from right to left as seen in this image:

maker-grab
maker-grab800×238 104 KB

but am not having much luck with the CSS I have tried, so I am beginning to wonder if this is even possible? Here is the test CSS I am using:

#home-page-container {
    /*background-image: url(/images/maker-background.png);*/
    background-repeat: no-repeat;
    /*background-position: center;*/
    background-size: cover;
    background-color:blue;
    background-image: url(/images/maker-background.png), url(/images/blue-0101-bright.png);
    background-size: 100% auto;
    margin: 0;
    padding: 0;
}
/*@keyframes animatedBackground {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 100% 0;
    }
  }
  #animate-area {
    width: 400px;
    height: 400px;
    background-image: url(/images/blue-0101-bright.png);
    background-position: 25% 25%;
    background-repeat: repeat-x;
    animation: animatedBackground 10s linear infinite alternate;
  }*/

and here is the HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background</title>
    <link rel="stylesheet" href="app.css">
</head>

<body id="home-page-container">
   <div id="animate-area"></div>
</body>
</html>

I tried using @keyframes but that image overlayed the Maker text I wanted it to be behind. Not what I would like to see.

If this is not possible it is not the end of the world for me, but it would be nice to be able to do this.

Thank you,
Phillip

2

Do you have the two separate images available so we can see what we are dealing with?

You will probably have to mask the image to get the numbers to appear only on the letters.

It could be quite difficult but should be possible. However I’d need the images to play around with it.

3

CSS!!

element{
  position: relative;
  overflow:hidden;
  width: 600px;
  height: 400px;
}

.element:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 400px;
  animation: floating 5s infinite;
  z-index: -1;
 background-image:url(https://xyz.photos/id/237/600/400)
}


@keyframes floating {
  from { transform: translate(0,  0px); }
  65%  { transform: translate(0, 15px); }
  to   { transform: translate(0, -0px); }    
}

I found this coding on Craig Buckler, but hope this would be helpful for you. If you have any query must ask about it.

4

This demo of mine is similar and I have adjusted it just as a proof of concept although it uses real text rather than image text.

I’m thinking similar could be done with the mask-image property but I’d need your two images to test and of course the overlaid image numbers would need to have a transparent background or the image below is rubbed out.

1 Like
5

Sorry for the late reply but for some reason (again …) I never seem to be notified of new posts.

Anyway, I have solved this issue as seen next:
http://redristracards.com

I came across something with an RGB color and it hit me that this color scheme does offer transparency.

color: rgba(225, 225, 225, 0.01);

So if the text is transparent, then rest is fairly easy to accomplish. I’m still not through ‘testing’ this method and will not say it is bullet-proof, but it does work. I hope to learn the downsides to this method soon enough.

Thanks!

6

Thank you, Lara, for posting your code. I will definitely take a look at it.

I just posted the method I finally ended up using and a link to it. This method seems to work well.

Thanks again for your help.

7

I will eventually change the background to a gray gradient as I think this will look much better and any color would.

Thanks.

8

That’s basically a hacked up version of the example I gave you :).

It’s the background-clip that does all the heavy lifting.

That doesn’t really have anything to do with it as you could just set the color to transparent anyway. (color:transparent). However that is bad for accessibility because browsers that don’t understand the background-clip will now get transparent text so they get invisible text. You should instead use the text-fill-color property as that will work on browsers that support the background-clip:text and thus browsers that don’t understand those rules get solid text.

  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;

Now that I have access to your image I can simplify my code into basically one rule to get the effect that you want (all the rest of the code is just pretty fluff).

I also gave you some automatic responsive text sizing for smaller screens and lastly I urge you to use the prefers reduced motion media query (as in my example) as something like this is prone to inflict an epileptic fit on the unwary :slight_smile:

The prefers reduced motion media query is something that should be added to all websites these days as its a simple and effective accessibility aid.:wink:

1 Like
9

Thank you so very much for your indepth critique of my mockup.

You have highlighted several issues that I had not even considered: accessibility, etc. For some reason I cannot get your CodePen demo to work so I will upload to hopefully get a glimpse at your code.

I will report back ASAP.

Thanks again for all of you invaluable commentary.

1 Like
10

Just shout if you run into problems. :slight_smile:

It’s basically the same technique that you were using but of course there may be other things going on in your real page.

1 Like
11

OK I just got your markup to work on my computer. I have not had a chance to study all of your methods but I will. Thank you for creating the gradient. I tried doing that and failed miserably.

Thank you once again for your amazing help.

2 Likes
12

Thank you, you are very kind.

One problem I just noticed is that when I ran the webpage on my iPad Pro all I was able to see was the gradient - the text was missing for some reason. Not the end of the world, just a test.

Thank you once again for your help.

13

Was that my codepen or your actual page?

The codepen is working on my iPhone which is safari iOS so should work on an iPad etc as long as it’s not an old one.

I did change the image url to https as codepen doesn’t show non https images.

14

It was my actual webpage with your markup as seen next:

webpage
webpage602×800 126 KB

My iPad is two years old or so. This is not a serious issue for me at the moment. I was just curious as to why my iPad could not see the text. I use it quite often to test my web work.

Thanks again for your help.

15

That page is working on my iPhone in Safari iOS

IMG_1942
IMG_1942750×1334 68.4 KB

It should therefore work on the iPad but I’m away from home for another month and don’t have an iPad to test on here. Maybe someone else on the forum can check on their iPad and see whether it’s a safari version issue?

Can you try both my codepens on your iPad and see if they are broken also?

If it can’t be resolved then you may need to use the @supports media query to supply the enhanced version etc

16

Well, surprise, surprise … I was able to see the webpage on my iPhone.

iPhone
iPhone337×600 643 KB

I just ran your CODEPEN demo on the iPad and once again, the text was missing. This tells me it must be an iPad Safari issue. I will try updating it.

Please do not bother with this as it is a non-issue.Thanks again for your help.

1 Like
17

You are welcome!! I am happy that you found it useful for you. Glad to help you.

18

Just for completeness (and for anyone else watching) I added @supports rule so that browsers that don’t understand the background-clip:text still get solid text and not invisible text. They don’t get the fancy image behind the text but do have a usable page.

(You could swap out the text for a real image if you wanted to keep the same look but without animation etc).