CSS Media Screen bootstrap vi em um codigo e achei estranho

[joaovitorm10]

<div style="@media (max-width: 575.98px){background-image: url(assets/img/hero-bg2.jpg);} @media (min-width: 576px) {background-image: url(assets/img/hero-bg.jpg)}"></div>

vi em um site de template e tentei usa no bootstrap e não funcionou o que fiz de errado se alguém puder me explica

[o programador doido]

@joaovitorm10 O código não funciona dessa forma você deve especifica-lo e joga-lo dentro de sua .css 

 

CSS:

@media (max-width: 575.98px){
  /** Tag */
  div{
    background-image: url("assets/img/hero-bg2.jpg")
  }
}

@media (max-width: 576px){
   /** Tag */
  div{
    background-image: url("assets/img/hero-bg.jpg")
  }
}

HTML:

<img src="assets/img/hero-bg2.jpg">