Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Custom CSS for moving background image

Sarah Dec 14, 2018 08:37PM CET

Hello,

I currently have a background image for my portfolio page. I am working in code pen to make the background move using this code (WIP):

body
{
width: 100%;
margin:0em 5%;
background-color:#000000;
background-image: url("http://sarahjoyhood.com/wp-content/uploads/2018/10/sjh-about-bg.png");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
animation: animatedBackground 30s linear infinite;
/* Safari and Chrome: */
-webkit-animation: animatedBackground 30s linear infinite;
}
@keyframes animatedBackground
{
from { background-position: 100% 0%; }
to { background-position: 100% 100%; }
}
@-webkit-keyframes animatedBackground
{
from { background-position: 100% 0%; }
to { background-position: 100% 100%; }
}

When I go to the page in Semplice, and select the branding tab, im putting the custom css in the "Edit Custom CSS" section, but i'm not seeing the results when I preview. I will see the new background blink for half a second when the page loads, but then disappear. Am I placing the custom code in the correct space (I also tried in the custom css in the "Customize" section for a moment but would like it to only effect the one page) or is the problem with my code or an override issue?

Thank you!
- Sarah

Up 0 rated Down
Jon Dec 16, 2018 07:34AM CET Semplicelabs Agent

Hey Sarah!

Thanks for reaching out :)

Sadly, we can’t provide custom CSS support for customers looking to modify default Semplice functionality (we’re a small crew, and it’s not feasible for us to write custom CSS for every customer).

What I can say though is that this CSS code should work and the issue is probably more due to the fact you should target the ‘content-container’ class instead of the body class, or assign a custom class to a section in your Section Styles area and target a section with a custom class. Also, you might want to add !important rules at the end of each CSS line to force your changes, so for example:

this

background-color:#000000 !important;

instead of

background-color:#000000;

I’m sorry I can’t assist more than this, but hope it points you in the right direction
Jon

Post Your Public Answer

Your name (required)
Your email address (required)
Answer (required)
17c96688a1a336f6040dd1b6149c3fa8@semplicelabs.desk-mail.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete