Adding Moving Images

After looking a little further, I believe there maybe a lot more to this than I thought!..

• This reply was modified 7 years, 5 months ago by metropolisrob.

Hello,
Its may be positioning issue. I appreciate if you please tell me the in which page you are facing this problem. The page link you provide that works fine. Don’t know actually in which page this problem is happening.
thanks.

Thanks for the response.

Apologies the plane you see on the “Work With Us” Page, was the same plane as the front page (I was just testing it)

When I try add my edited plane, it doesn’t show. (Its meant to read “We’re Recruiting”

Just to confirm the page I need help on is https://www.metropolis-surveyors.com/surveying-jobs/

Hello,
I just inspect your work with us page.
You have no background attachment in that div for that page. While there is a background attachment in the front page, thats why its shows up.
Please attach you give in that div, if it doesn’t work then let me know.

Thanks.

Hi,

I’ve copied the code exactly for the front page (The top part has now enlarged/created a flying path)

What’d do you mean by background attachment? I’m a little confused ??

Sorry & thanks for the help so far!

I mean below type of code doesn’t exist in the mentioned page.
Look here you attach a background image but in that page you don’t attach any image.

#animate-clouds #plane {
    width: 418px;
    height: 50px;
    position: absolute;
    top: 50px;
    background-image: url(../img/animate/Plane-Banner.gif);
}

Thanks.

Right I see what you mean ?? Sorry for the confusion! And thank you for the help so far.

Only trouble I’m having now is, where would I add that on my template? Below is my code;

<?php
/*
  Template Name: Recruiting Plane
 */
get_header();
$backgroundimg = retina_image(get_field('header_image'), 'full', '', TRUE);
?>

    <section id="main-banner" style="background-image:url('<?php echo $backgroundimg; ?>');">
        <div id="animate-clouds">
            <div id="cloud-1" class="cloud">

            </div>
            <div id="cloud-2" class="cloud">

            </div>
            <div id="cloud-3" class="cloud">

            </div>
            <div id="cloud-4" class="cloud">

            </div>
            <div id="plane-banner-recruit">

            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div id="header-title" style="text-align:center;">
                        Work With Us
                    </div>
                </div>
            </div>
        </div>
        <div id="animate-ground">
            <div>
                <div id="animate-ground-paper-boy">
                    <div id="paper-boy"></div>
    </section>
<?php get_template_part('content', 'flex'); ?>

    <section class="clearfix"></section>
<?php get_footer(); ?>

• This reply was modified 7 years, 5 months ago by metropolisrob.

Keeping mind if I simply change the plane section on my template from;

</div>
            <div id="plane-banner-recruit">

to

</div>
            <div id="plane">

Then the original plane appears on my template – could the gif that I created be missing something?

You have to write css in you site.
Go to your dashboard > appearance > customizer > choose additional css tab > there you will write you css code.

You markup or code, its ok. NO problem with this. But you have to write css for where you want to place this.

Place below code where I mention in the above comment.
Dashboard > appearance > customize > additional css > place below code in the css box.

div#animate-clouds div#plane-banner-recruit
{
background-image: url(https://www.metropolis-surveyors.com/wp-content/themes/metropolis/img/animate/Plane-Banner.gif);
    width: 418px;
    height: 50px;
    position: absolute;
    top: 50px;
    background-size: 418px 50px;
    -webkit-animation-name: plane-fly;
    -moz-animation-name: plane-fly;
    -o-animation-name: plane-fly;
    animation-name: plane-fly;
    -webkit-animation-duration: 25s;
    -moz-animation-duration: 25s;
    -o-animation-duration: 25s;
    animation-duration: 25s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

Hope it will solve you issue.
thanks.

Hi,

That worked perfectly – as soon as I added the CSS and linked the correct picture it popped up!

Thank you very much for your help! You’ve really helped me out ??

Thanks again,

Rob.