Как отображать полный контент на фоновом изображении на мобильном устройстве?

Question

Я могу отображать контент на изображении на рабочем столе, но когда я изменяю размер моего браузера, мой контент не отображается должным образом. Итак, вопрос заключается в том, как установить фоновое изображение с полным содержимым? Пожалуйста, проверьте мои изображения ниже, вы получите представление о том, что я спрашиваю? Высота моего фонового изображения - 500 пикселей. Не могли бы вы мне помочь?

Заранее спасибо.

html, body 
 
{ 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 

 
p{ 
 
    color: red; 
 
} 
 
.test-1 
 
{ 
 
    background-image:url('images/images-bg.png'); 
 
    background-repeat: no-repeat; 
 
    width: 100%; 
 
    height: auto !important; 
 
    background-position: center; 
 

 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="test-1"> 
 
    <div class="container"> 
 
     <div class="row"> 
 

 
     <div class="col-md-6"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p> 
 
     </div> 
 

 
     <div class="col-md-6"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p> 
 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p> 
 

 
     </div> 
 

 

 

 
     </div> 
 
    </div> 
 
    </div>

В Desktop Там не проблема в этом

После изменения размера

Answer 1

Просто редактировать CSS, и добавить background-size

.test-1 { 
    background-image:url('images/images-bg.png'); 
    background-size:cover; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: auto !important; 
    background-position: center; 
} 

Вы можете прочитать больше о background-size в HERE

Answer 2

удалить ширина 100% и установить фон-размер: крышка, а также удалить HTML, раздел тела. Ваш помощью начальной загрузки, так что вам не нужно, чтобы определить, что

p { 
 
    color: red; 
 
} 
 

 
.test-1 { 
 
    background: url(http://www.hollanders.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/s/i/sil370523644_1_2.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="test-1"> 
 
    <div class="container"> 
 
     <div class="row"> 
 

 
     <div class="col-md-6"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p> 
 
     </div> 
 

 
     <div class="col-md-6"> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p> 
 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla feugiat est eget tempor ornare. Fusce malesuada magna non nisl efficitur tempor. Nam mattis ullamcorper ante ut iaculis. Proin ornare, neque eu pulvinar sodales, tortor lacus blandit diam, eu feugiat nisl dolor eget urna. Morbi quis tellus ultrices, condimentum ex vel, rhoncus nisi. Vivamus vestibulum quam sem, ac finibus mauris blandit ut. Pellentesque convallis massa id consectetur faucibus. Donec ac mi ac ante commodo convallis quis quis risus. Ut orci nisl, sodales non consectetur blandit, interdum rutrum mauris. Fusce ullamcorper in lorem at cursus. Mauris congue tristique orci quis suscipit.</p> 
 

 
     </div> 
 

 

 

 
     </div> 
 
    </div> 
 
    </div>