Trouble creating a moving header image on CSS for a subreddit

[HHHP]

Hi!

I just made a subreddit (r/SubToTest) to start tinkering with CSS, but I don’t know how to make a moving header.

I already have a large image ready to upload as a header, but I don’t know how to make it slide from right-to-left, and start over when it reaches the “end of the picture”.

Here’s a bit of the code:

#header{
    margin:0;
    height:196px;
    border:none;
    background:url(%%headerimg%%) 50% 50% / cover no-repeat;
    z-index:1;
    box-shadow:0 2px 1.5px 0 rgba(0,0,0,.12),0 0 4px 0 rgba(0,0,0,.12)
}
#sr-header-area{
    background:rgba(0,0,0,0.08);
    border:none;
    transition:all .15s ease;
    height:24px;
    line-height:23px
}
#sr-header-area .width-clip{
    right:300px
}
body:not(.loggedin) #sr-header-area .width-clip{
    right:340px
}
#sr-header-area .sr-list{
    margin-right:48px
}
#sr-header-area .sr-bar a,#sr-more-link,#sr-header-area .separator,#sr-header-area .dropdown.srdrop .selected{
    background:none;
    color:rgba(255,255,255,0.4);
    transition:all .15s ease
}
#sr-header-area:hover .sr-bar a,#sr-header-area:hover #sr-more-link,#sr-header-area:hover .seperator,#sr-header-area:hover .dropdown.srdrop .selected{
    color:rgba(255,255,255,0.8)
}
#sr-header-area .sr-bar a:hover,#sr-more-link:hover,#sr-header-area .dropdown.srdrop .selected:hover{
    background:none;
    border:none;
    transition:all .15s ease
}

The full source code is here: https://pastebin.com/raw/WFwhVuPn

[RandellDawson]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.