Media query in combination with background-attachment doesn't work-CodePudding

I am making a website. The desktop version works just fine but when I try to put my media queries for on the phone/tablet etc. nothing changes. I think it is because I use background-attachment: fixed;

Here is a small example:

body{
 font-family: 'Open Sans', sans-serif;
 font-weight: 400;
 line-height: 1.6;

 background-image:linear-gradient(to right, rgba(64, 42, 145, 0.4), rgba(63, 49, 112, 0.4)), url(../img/color.jpg);
 background-repeat: no-repeat;

 background-position: center;
 background-attachment: fixed;
 color: #fff;

 @media only screen and (max-width: 37.5em) {
    background-image: none;
    color:black;
//just a example this in not the real change i want to make
 }
}

When using a small screen, nothing changes. It is really ugly on the phone.

CodePudding user response：

Media query can't be included inside body.

body{
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    line-height: 1.6;
   
    background-image:linear-gradient(to right, rgba(64, 42, 145, 0.4), rgba(63, 
    49, 112, 0.4)), url(../img/color.jpg);
    background-repeat: no-repeat;
   
    background-position: center;
    background-attachment: fixed;
    color: #fff;
   

   }  
   @media only screen and (max-width: 450px) {
    body {
   background-image: none;
   color:black;
    }
}

CodePudding user response：

oke sorry its fixed

i had a small mistake in my viewport i had that's why it didn't change

<meta name="viewport" content="width=device-width, initial-scale-1.0">

but of course it had to be

<meta name="viewport" content="width=device-width, initial-scale=1.0">

thank you everyone !