Afbeelding niet responsive

Goedemiddag Allemaal,

Ben momenteel met het volgende bezig. Ik heb een header foto en bij het verkleiner naar een MD device wil ik graag dat de afbeelding in verhouding ook verkleint.

Ik dacht dat dit kon door de afbeelding een: Display:block en een width:100% mee te geven. Helaas wordt hij niet in verhouding verkleint. Wat doe ik fout?

HTML

 <div class="container-fluid">   
        <div class="slider">
             <div class="row">
               <div class="text-center">
                   <div class="slidertext">
                        <h1>DIT IS EEN TEKST</h1>
                   </div>   
               </div>  
             </div>  
           </div>   
      </div>

CSS 

.slider {background-image:url("../images/slider.jpg"); background-repeat:no-repeat; width:100%; height:480px; display:block;}