#media landscape working but min-width and max-width aren't - html

Question

I am trying to use #media to change te background image of my website
Somehow when I use #media (orientation: landscape) is works fine but when I use min and max width is doesn't show any background
I inserted
<meta name="viewport" content="width=device-width, initial-scale=1">
in the page that uses the css file.
#media screen and (min-width: 1501px) and (max-width: 6000px) {
body {
/* this one doesn't work*/
background: url(/afbeeldingen/overzichtskaart.jpg);
background-repeat: no-repeat;
/*background-size: 100% 100%*/
}
}
#media screen (max-width: 1500px) and {
body {
/* this one doesn't work*/
background: url(/afbeeldingen/overzichtskaart_laptop.jpg);
background-repeat: no-repeat;
/*background-size: 100% 100%*/
}
}
#media (orientation: landscape) {
body {
/* this one does work*/
background: url(/afbeeldingen/overzichtskaart_laptop.jpg);
background-repeat: no-repeat;
/*background-size: 100% 100%*/
}
}
I don't want to use the landscape option but change backgrounds based on the width size.

Answer 1

Its just because you are not writing your css properly. Below example might be helpful for you.
#media screen and (min-width:1501px) and (max-width:6000px) {
h1{
background-color:red;
}
}
#media only screen and (max-width: 1500px) {
h1 {
background-color:green;
}
}
<h1>This is test</h1>

Answer 2

The syntax you are using is wrong. The correct syntax is #media only screen and (min-width: 1501px) and (max-width: 6000px) and #media only screen and (max-width: 1500px).
Try this:
#media only screen and (min-width: 1501px) and (max-width: 6000px) {
body {
background: url(https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
background-repeat: no-repeat;
}
}
#media only screen and (max-width: 1500px) {
body {
background: url(https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80);
background-repeat: no-repeat;
}
}
Refer: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Hope it helps. Cheers!

Answer 3

If you are using that commenting syntax in your original CSS, this might be part of the cause for your troubles: // at the start of the line won't work for comments in CSS. Comments in CSS have to be writte as /* ... your code ... */.
And your second CSS rule shouldn't have #media screen (max-width: 1500px) and {... as a selector, but instead #media screen and (max-width: 1500px) {... (i.e. wrong order)