Solved

How To Make Background Image Move? (Dawn)

milkandcookies
Tourist
346 0 41

Hi,

How can I make the pink background balloon move up & down (to simulate floating)?

milkandcookies_0-1707802838943.png

 

https://www.pop--shop.com/products/signature-25-pack-pop-box#

thanks in advance

Accepted Solutions (2)

TerenceKEANE
Tourist
120 30 52

This is an accepted solution.

 

Hello,

 

I think the following code snippets should do the trick. However, for your website, it's better to upload an oval image instead of one with sharp corners. Also, after uploading this image, replace the URL in the ::before property as indicated in the place I mentioned earlier. Once you've uploaded the code, you'll understand what I mean. Another thing you need to do is remove the existing background image so that they don't overlap. In short, this is necessary to prevent them from stacking on top of each other.

background-image: url(/cdn/shop/files/both_balloons.svg);

 

 

Best regards,

 

 

.section-template--16350539251893__custom_liquid_8VjdiT-padding {
    position: relative;
    background: unset!important;
}

.section-template--16350539251893__custom_liquid_8VjdiT-padding::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/cdn/shop/files/both_balloons.svg);
    background-size: cover;
    background-position: center;
    z-index: 1;
    animation: hareket-et 10s linear infinite alternate;
}

@keyframes hareket-et {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

.section-template--16350539251893__custom_liquid_8VjdiT-padding > div {
    position: relative;
    z-index: 2;
}
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, a Coffee  would be the anchor keeping me steady!"
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
https://novajetsoft.com

View solution in original post

TerenceKEANE
Tourist
120 30 52

This is an accepted solution.

mind gap 🙂

 

Screenshot 2024-02-18 192742.png

★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, a Coffee  would be the anchor keeping me steady!"
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
https://novajetsoft.com

View solution in original post

Replies 15 (15)

TerenceKEANE
Tourist
120 30 52

This is an accepted solution.

 

Hello,

 

I think the following code snippets should do the trick. However, for your website, it's better to upload an oval image instead of one with sharp corners. Also, after uploading this image, replace the URL in the ::before property as indicated in the place I mentioned earlier. Once you've uploaded the code, you'll understand what I mean. Another thing you need to do is remove the existing background image so that they don't overlap. In short, this is necessary to prevent them from stacking on top of each other.

background-image: url(/cdn/shop/files/both_balloons.svg);

 

 

Best regards,

 

 

.section-template--16350539251893__custom_liquid_8VjdiT-padding {
    position: relative;
    background: unset!important;
}

.section-template--16350539251893__custom_liquid_8VjdiT-padding::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/cdn/shop/files/both_balloons.svg);
    background-size: cover;
    background-position: center;
    z-index: 1;
    animation: hareket-et 10s linear infinite alternate;
}

@keyframes hareket-et {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

.section-template--16350539251893__custom_liquid_8VjdiT-padding > div {
    position: relative;
    z-index: 2;
}
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, a Coffee  would be the anchor keeping me steady!"
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
https://novajetsoft.com
milkandcookies
Tourist
346 0 41

thanks so much @TerenceKEANE! any chance you know how I can make the right balloon move in the same pattern, but off by a few seconds (so it looks like they are floating at different times?)

milkandcookies_0-1707810571929.png

 

TerenceKEANE
Tourist
120 30 52

You are welcome @milkandcookies . Can you just give me two different picture URLs so that I can try more easily?

★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, a Coffee  would be the anchor keeping me steady!"
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
https://novajetsoft.com
TerenceKEANE
Tourist
120 30 52

The following code will do the job. The one on the right will come into play 4 seconds later. Also, the edges of the images are cut off. I'm not exactly sure where it's coming from, but perhaps aligning and uploading the main image centrally in programs like Photoshop might solve this issue 🙂

 

best regards,

 

 

.section-template--16350539251893__custom_liquid_8VjdiT-padding {
    position: relative;
    background: unset!important;
}

.section-template--16350539251893__custom_liquid_8VjdiT-padding::before,
.section-template--16350539251893__custom_liquid_8VjdiT-padding::after {
    content: ''!important;
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100%!important;
    background-size: cover!important;
    background-position: center!important;
    z-index: 1!important;
}

.section-template--16350539251893__custom_liquid_8VjdiT-padding::before {
    background-image: url("https://cdn.shopify.com/s/files/1/0635/1205/1893/files/Left.svg")!important;
    animation: hareket-et 10s linear infinite alternate!important;
}

.section-template--16350539251893__custom_liquid_8VjdiT-padding::after {
    background-image: url("https://cdn.shopify.com/s/files/1/0635/1205/1893/files/Right.svg")!important; 
    animation: hareket-et-2 10s linear infinite alternate!important;
    animation-delay: 4s!important; 
}

@keyframes hareket-et {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

@keyframes hareket-et-2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-50px, -50px);
    }
}

.section-template--16350539251893__custom_liquid_8VjdiT-padding > div {
    position: relative;
    z-index: 2;
}

 

★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, a Coffee  would be the anchor keeping me steady!"
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
https://novajetsoft.com
milkandcookies
Tourist
346 0 41

unreal, thank you so much!! this is extremely helpful! I've been trying to fix this for days. thanks again 🙂

TerenceKEANE
Tourist
120 30 52

I'm glad it worked. Don't hesitate to reach out if you have any questions or concerns 🙂

★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, a Coffee  would be the anchor keeping me steady!"
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
https://novajetsoft.com
milkandcookies
Tourist
346 0 41

@TerenceKEANE, how can I move up the balloon animation? I would like it to move up 150px so that it enters the video section. thanks in advance!

milkandcookies_1-1707891849276.png

 

TerenceKEANE
Tourist
120 30 52

If I'm not mistaken, the background animation on the top left will overlay the video, right? Also, I noticed there are 4 animations. It seems like you've played around with the code a bit. Not a problem though, but the animation part seems a bit confusing. You know the codes I gave you earlier, update the one named “hareket-et-2” with those. Also, in the translate() part, the first value should be 'horizontal', and the next one should be 'vertical'. '-' and '+' values pull the animation in the opposite direction. With this logic, you can direct it wherever you want. You just need to experiment a bit. Let me give you a small tip. Background shapes are referred to as 'blob image shapes' in the CSS part. You can find nicer shapes by searching on Google. Feel free to write if you have any other questions.

 

@keyframes hareket-et-2 {

    0% {

        transform: translate(0, 0);

    }

    100% {

        transform: translate(-50px, -175px);

    }

}

★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, a Coffee  would be the anchor keeping me steady!"
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
https://novajetsoft.com
milkandcookies
Tourist
346 0 41

hi @TerenceKEANE, how can I edit the code to stop the blobs from being cropped off when I zoom in/out (shown below):

milkandcookies_1-1708244262874.png

 

 

TerenceKEANE
Tourist
120 30 52

hello again,

 

Could you first change "background-size: cover!important” --> to "background-size: contain!important;" ? Then, right below these lines, could you add "background-repeat: no-repeat;"? This should solve the issue. If anything comes up, feel free to let me know.

 

★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, a Coffee  would be the anchor keeping me steady!"
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
https://novajetsoft.com
milkandcookies
Tourist
346 0 41

@TerenceKEANE thank you kind sir, you are a life saver 🙂 How can I stop the second pair of animation images from shifting left when I zoom out?

milkandcookies_1-1708248511487.png

 

 

TerenceKEANE
Tourist
120 30 52

you are welcome. just add them  🙂

 

.section-template--16350539251893__custom_liquid_8VjdiT-padding:before{
	    
	        background-position: center;
}

.section-template--16350539251893__custom_liquid_8VjdiT-padding:after{
	    
	        background-position: center;
}

 

★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, a Coffee  would be the anchor keeping me steady!"
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
https://novajetsoft.com
milkandcookies
Tourist
346 0 41

@TerenceKEANE okay now all blobs are moving correctly except for the one circled below (it has stopped moving entirely).. can you please help

milkandcookies_0-1708254972877.png

 

TerenceKEANE
Tourist
120 30 52

This is an accepted solution.

mind gap 🙂

 

Screenshot 2024-02-18 192742.png

★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, a Coffee  would be the anchor keeping me steady!"
Software Engineer - Specializing In Advanced E-Commerce Websites | Hundreds Of Advanced E-Commerce Website Experiences
https://novajetsoft.com