How to replace header background image for mobile - bootstrap

I can't figure out how to serve different image for mobile users - my banner become too small to read. I am kinda new to this. I successfully managed to put banner image where it should be using bootstrap, with help of following css code:

  .jumbotron{
    margin-top: 5px;
    background-image: url(obr/head.jpg);
    background-size: cover;
    height: 100%;
    background-size:100% auto;
    background-repeat: no-repeat;
    min-height: 320px;
  }

and html

<header class="jumbotron">

</header>

Note that I had to set min-height: 320px; because it was the only way to display banner in correct size (apart from adding br's in header tag). On mobile, banner is small to read and also creates white space because of min-height..

I tried to serve different image for mobile users using this css code:

/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
.jumbotron{
background-image: image-url("obr/head_mobile.png");
}
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
.jumbotron{
background-image: image-url("obr/head_mobile.png");
}
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
.jumbotron{
background-image: image-url("obr/head_mobile.png");
}
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
  .jumbotron{
  background-image: image-url("obr/head.jpg");
}
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
  .jumbotron{
  background-image: image-url("obr/head.jpg");
}
}

but no luck. Can anyone help me sorting this out? I prefer easy to follow steps to take. Thank you so much.

Solution

Media Queries do not begin with # they are started by a @ sign.

background-image: image-url("obr/head_mobile.png"); is not a property. Use background-image: url("img-path");. Then it will work fine.

EXAMPLE

@media only screen and (max-width: 500px) {
  body {
     background-color: blue;
  }
}

Your Code Correction:

 /* Custom, iPhone Retina */
    @media only screen and (min-width : 320px) {
        .jumbotron {
            background-image: url("obr/head_mobile.png");
        }
    }

    /* Extra Small Devices, Phones */
    @media only screen and (min-width : 480px) {
        .jumbotron {
            background-image: url("obr/head_mobile.png");
        }
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
        .jumbotron {
            background-image: url("obr/head_mobile.png");
        }
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        .jumbotron {
            background-image: url("obr/head.jpg");
        }
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        .jumbotron {
            background-image: url("obr/head.jpg");
        }
    }

Learn more about media queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

See the working code here: https://codepen.io/manaskhandelwal1/pen/NWqdOPZ