Make background image responsive fluid

Question

I'm having trouble with making the background image fluid, right now it's just fixed and doesn't scale down with the browser. Please find the below the code:

.Classical {
  padding-bottom: 4em;
  background-image: url(http://p1.pichost.me/i/28/1515634.jpg);
  width: 100%;
  position:relative;
  height: auto;
}

@media screen and (max-width:400px) {
  .Classical {
    padding-bottom: 2em;
  }
}

.Classical .inner {
  max-width: 80%;
  padding: 3em 1em 3em 1em;
  margin: 0 auto;
  text-align: center;
  font-family: brandon-grotesque, brandon-grotesque, Futura, sans-serif;
  margin-top: 4em;
}

@media screen and (max-width: 800px) {
  .Classical .inner {
    padding: 3em .5em 3em .5em!important;
  }
}

@media screen and (max-width: 700px) {
  .Classical .inner {
    max-width: 90%!important;
  }
}

@media screen and (max-width: 500px) {
  .Classical .inner {
    padding: 2em 1em 2em 1em!important;
    line-height: 23px!important;
  }
}

@media screen and (max-width: 400px) {
  .Classical .inner {
    padding: 1em 1em 1em 1em!important;
    margin-top: 2em;
  }
}

.Classical .inner .Title {
  font-family: brandon-grotesque, 'Brandon Grotesque', Futura, sans-serif;
  font-size: 1.5em;
  font-weight: 500;
  font-weight: 500;
  color: #fefd32;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
}

@media screen and (max-width: 600px) {
  .Title {
    font-size: 1.2em!important;
  }
}

@media screen and (max-width: 500px) {
  .Title {
    font-size: 1em!important;
  }
}

@media screen and (max-width: 400px) {
  .Title {
    font-size: .9em!important;
  }
}

@media screen and (max-width: 370px) {
  .Title {
    font-size: .8em!important;
  }
}

.Classical .inner .Bio-Content {
  font-family: brandon-grotesque, 'Brandon Grotesque', Futura, sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.Classical .inner span {
  margin-top: 2em;
  margin-bottom: 2em;
}

@media screen and (max-width: 700px) {
  .Classical .inner span {
    margin-top: 1.5em!important;
    margin-bottom: 1.5em!important;
  }
}

@media screen and (max-width: 400px) {
  .Classical .inner span {
    margin-top: 1.2em!important;
    margin-bottom: 1.2em!important;
  }
}


/*STARTS HEADER, TITLE*/

.title-boom {
  display: table;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 999;
  background-color: black;
}

.title-bang {
  display: table-row;
  width: 100%;
}

.black-board {
  background-position: center;
  cursor: pointer;
  width: 100%;
}

.black-board h1 {
  display: inline-block;
  font: 800 1em "proxima-nova", sans-serif;
  float: left;
  text-align: center;
  width: 33.33%;
  margin-top: 2em;
  margin-bottom: 2em;
}

@media screen and (max-width: 673px) {
  .black-board h1 {
    font: 800 .7em "proxima-nova", sans-serif;
  }
}

@media screen and (max-width: 500px) {
  .black-board h1 {
    font: 800 .6em "proxima-nova", sans-serif;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
  }
}

@media screen and (max-width: 400px) {
  .black-board h1 {
    font: 800 .5em "proxima-nova", sans-serif;
  }
}

@media screen and (max-width: 500px) {
  .black-board a {
    letter-spacing: 6px!important;
  }
}

@media screen and (max-width: 400px) {
  .black-board a {
    letter-spacing: 3px!important;
  }
}

.black-board h1 a:hover {
  text-decoration: none;
  color: #fefd32;
}

.black-board a {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 8px;
  color: #fff;
}


/*ENDS HEADER, TITLE*/

.box {
  background-color: #5c9cfd;
  width: 57.5%;
  margin: 0 auto;
}

@media screen and (max-width: 700px) {
  .box {
    width: 70%!important;
  }
}

@media screen and (max-width: 450px) {
  .box {
    width: 85%!important;
  }
}

@media screen and (max-width: 400px) {
  .box {
    width: 100%!important;
  }
}

<div class="Classical">

  <header class="title-boom">
    <div class="title-bang">
      <div class="black-board">
        <h1><a href="#">Events</a></h1>
        <h1><a href="#">Design</a></h1>
        <h1><a href="#"target="_blank">Papers</a></h1>
      </div>
      <!--END BLACK-BOARD-->
    </div>
    <!--END TITLE-BANG-->
  </header>
  <!--TITLE-BOOM-->

  <!--BIOGRAPHY-->
  <div class="box animated bounceInUp">
    <div class="inner">
      <a class="Title">Dummy</a>
      <br>
      <span class="underline"></span>

      <a class="Bio-Content">


    O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. <br><br>Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.<br><br>

</a>

    </div>
    <!--ENDS INNER-->
  </div>
  <!--ENDS BOX-->
</div>
<!--ENDS CLASSICAL-->

https://jsfiddle.net/kadeemlaurie/tpp2nwog/

Answer 1

One of the suitable approaches here is setting background-size: cover, so background image will always adjust to cover all the container width and height without changing aspect ratio:

.your-container {
    background: url('path/to/your/image.jpg') center center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

Check this fiddle, I think it's what you are looking for

Answer 2

See example - Fiddle

CSS

background-repeat:no-repeat;
background-size:contain;
background-position:center;