How to achieve the sliding effect of CSS background image without using F12?

Question

I'm currently trying to make a website using CSS and HTML, but I can't seem to get my background image to slide and move. I use VisualStudioCode and I ran the code on Google but it doesn't move but when I press F12 to debug it does? ! This is my code: body{background-color:black;margin:0;padding:0;background-image:url("I have a correct URL,

P粉633733146 · Answer

I think I know where the problem is. The animation doesn't work because the background-position property is set to fixed. This means that the background image will not move, regardless of animation. To solve this problem, you need to change the background-position property to scroll.

body {
    background-color: black;
    margin: 0;
    padding: 0;
    background-image: url("我有一个正确的URL，但我不想分享它");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    animation: slide 1s linear infinite alternate; 
    }

    @keyframes slide {
        0% {
            background-position: -175% 0%;
        }
        100% {
            background-position: 300% 0%;
        }
    }

    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 0px;
    }