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 Visual Studio Code 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, but I don't want to share it");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    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;
    }

I tried asking Chat GPT for help, but just got more confused

Answer 1

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;
    }