Changing background picture via @Media screen

Question

so I'm trying to make my background image change when using a phone instead of a browser. The background is written in the style.CSS file, but apparently I'm doing something wrong because it won't change the picture no matter what.

Here is my CSS code.

body {
  font-family: "Open Sans", sans-serif;
  background-color: #040404;
  color: #fff;
  position: relative;
  background: transparent;
}

body::before {
  content: "";
  position: fixed;
  background:#040404 url("../img/Backgroundv.1.png") top right no-repeat;
  background-size: cover;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  z-index: -1;
}
@media screen and (max-width: 480px)
{
  body {
    content: "";
    position: fixed;
    background:#040404 url("../img/NormBackgroundMobile.png") top right no-repeat;
    background-size: cover;
    left: 0;
    right: 0;
    top: 0;
    height: 100vh;
    z-index: -1;
  }
}

Any tips or responses are much appreciated.

Answer 1

A small mistake. Change

    body {
            content: "";
            position: fixed;
            background: #040404 url("../img/NormBackgroundMobile.png") top right no-repeat;
            background-size: cover;
            left: 0;
            right: 0;
            top: 0;
            height: 100vh;
            z-index: -1;
        }

To:

    body::before {
            content: "";
            position: fixed;
            background: #040404 url("../img/NormBackgroundMobile.png") top right no-repeat;
            background-size: cover;
            left: 0;
            right: 0;
            top: 0;
            height: 100vh;
            z-index: -1;
        }

You were applying the CSS to the body tag instead of pseudo element