Загрузка обложки обложки не изменяется на мобильном телефоне

Question

У меня есть следующее изображение обложки, которое отлично смотрится на рабочем столе. Правильный выстрел в голову - так, когда я просматриваю страницу на мобильном телефоне, выстрел в голову обрезается.

Как сделать так, чтобы изображение изменялось при переходе на мобильный?

Вот мой bootply: http://www.bootply.com/KVei4t3ABg

Вот мой HTML:

<div class="intro-header"> 
    <div class="container"> 

     <div class="row"> 
      <div class="col-lg-7"> 
       <div class="intro-message"> 
        <h1>Title</h1><br> 
        <p class="subtitle">Search the most comprehensive online library </p> 
        <p class="intro-divider"></p> 
        <a href="https://www.apple.com" class="btn btn-primary btn-lg"> 
         Register for a Free Account 
        </a> 
       </div> 
      </div> 
     </div> 

    </div> 
    <!-- /.container --> 
</div> 

Вот мой CSS:

.intro-header { 
    padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */ 
    padding-bottom: 50px; 
    text-align: left; 
    color: #f8f8f8; 
    background: url(http://www.onvia.com/exchange/img/background_test.jpg) no-repeat center center; 
    background-size: cover; 
} 

Answer 1

Ваше фоновое изображение очень широк, но соответствующая часть узок. Я бы подумал о том, чтобы снять серый фон, заменить его цветом CSS и постоянно устанавливать портрет на правый край. Учитывая рассеянное плечо, это, вероятно, хорошая идея.

.intro-header { 
    padding-top: 50px; 
    padding-bottom: 50px; 
    text-align: left; 
    color: #f8f8f8; 
    background: url(...) no-repeat right center; 
    background-size: contain; 
    background-color: #ddd; 
} 

Demo