使背景图像响应流畅

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

See example - Fiddle

CSS

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

Answer 2

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