CSS Background Animation without a separate background wrapper - css

Question

I am animating a background to move but as expected using Background-position results in poor performance.
I am unable to alter or change the HTML or add any scripts
I have attempted using translate but this moves the entire div element rather than just the background, As mentioned I am not able to create a separate div for the background alone resulting in this roadblock.
.wm-outer-div {
width: auto !important;
min-width: 400px !important;
max-width: 500px !important;
padding: 0 !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
border-radius: 15px !important;
box-shadow: rgba(50, 50, 50, 0.45) 0px 0px 10px 0px;
background-color: rgb(255, 255, 255);
padding: 18px 22px 20px;
position: absolute;
width: 304px;
color: rgb(55, 55, 55);
font-family: walkme-opensans, sans-serif;
display: block;
margin: 0px;
vertical-align: baseline;
border-collapse: inherit;
background-image: none;
line-height: normal;
height: 300px;
text-indent: inherit;
letter-spacing: normal;
text-transform: none;
text-shadow: none;
border-style: none;
border-width: medium;
transition: none 0s ease 0s;
box-sizing: content-box;
direction: ltr;
z-index: 2147483632;
opacity: 1;
}
.wm-outer-div:after {
content: "" !important;
z-index: -1 !important;
background-color: #1E365E !important;
background-image: url("https://www.dropbox.com/s/zrzzbsa5b39w8ra/image.jpg dl=1") !important;
position: absolute !important;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
animation: slide 120s linear infinite !important;
repeat: repeat !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
border-radius: 15px !important;
}
#keyframes slide {
from {
transform: translateY(0);
}
to {
transform: translateY(-187%);
}
}
<div class="wm-outer-div wm-shoutout wm-shoutout-165013 wm-template-bg wm-template-small-corner wm-ltr wm-chrome wm-design-template-207418 wm-position-center" id="wm-shoutout-165013"></div>
Is there a way to target the background image separately to use translate without the addition of another div/wrapper so only the background moves and not the entire div element?
Failing that is there another option that could improve the performance of the background animation?

Answer 1

Make the pseudo element bigger to be sure you will cover the needed area when translating:
.wm-outer-div {
min-width: 400px !important;
max-width: 500px !important;
padding: 0 !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
border-radius: 15px;
box-shadow: rgba(50, 50, 50, 0.45) 0px 0px 10px 0px;
background-color: rgb(255, 255, 255);
padding: 18px 22px 20px;
width: 304px;
color: rgb(55, 55, 55);
height: 300px;
z-index: 0;
position:relative;
overflow:hidden;
}
.wm-outer-div:after {
content: "";
z-index: -1;
background-color: #1E365E !important;
background-image:url(https://i.stack.imgur.com/DpyrV.jpg);
background-size:cover;
position: absolute;
top: -100%;
left: -100%;
width: 300% ;
height: 300%;
animation: slide 2s linear infinite alternate;
box-sizing: border-box;
}
#keyframes slide {
from {
transform: translateY(33%);
}
to {
transform: translateY(-33%);
}
}
<div class="wm-outer-div wm-shoutout wm-shoutout-165013 wm-template-bg wm-template-small-corner wm-ltr wm-chrome wm-design-template-207418 wm-position-center" id="wm-shoutout-165013"></div>

Answer 2

.wm-outer-div {
width: auto !important;
min-width: 400px !important;
max-width: 500px !important;
padding: 0 !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
border-radius: 15px !important;
box-shadow: rgba(50, 50, 50, 0.45) 0px 0px 10px 0px;
background-color: rgb(255, 255, 255);
padding: 18px 22px 20px;
position: absolute;
width: 304px;
color: rgb(55, 55, 55);
font-family: walkme-opensans, sans-serif;
display: block;
margin: 0px;
vertical-align: baseline;
border-collapse: inherit;
background-image: none;
line-height: normal;
height: 300px;
text-indent: inherit;
letter-spacing: normal;
text-transform: none;
text-shadow: none;
border-style: none;
border-width: medium;
transition: none 0s ease 0s;
box-sizing: content-box;
direction: ltr;
z-index: 2147483632;
opacity: 1;
overflow: hidden
}
.wm-outer-div:after {
content: "";
background-image: url("https://thumbs-prod.si-cdn.com/c3phl1TZgQ92bLQugItmtovLZhs=/fit-in/1600x0/https://public-media.si-cdn.com/filer/54/10/5410da58-2295-4e3a-a847-fecd41cdcdd9/scarlet_tanager.jpg") !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateX(-150px) translateY(150px)
}
<div class="wm-outer-div wm-shoutout wm-shoutout-165013 wm-template-bg wm-template-small-corner wm-ltr wm-chrome wm-design-template-207418 wm-position-center" id="wm-shoutout-165013"></div>