如何在移动设备的背景图像上显示全部内容？答案

【问题标题】：How to display full content on background image in mobile device?如何在移动设备的背景图像上显示全部内容？
【发布时间】：2016-09-28 20:47:51
【问题描述】：

我可以在桌面的图像上显示内容，但是当我调整浏览器的大小时，我的内容无法正确显示。所以问题是如何设置完整内容的背景图片？请查看我下面的图片，你会明白我在问什么？我的背景图片高度是 500px。你会在这方面帮助我吗？

提前致谢。

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>

在桌面这没有问题

调整大小后

【问题讨论】：

使用background-size: cover;

标签： css html

【解决方案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;
}

您可以在HERE 中阅读有关background-size 的更多信息

【讨论】：

相信我 Mr.Habib Rohan ，我试过 background-size:cover;那个时候它没有用......谢谢你在这方面的帮助......它现在工作了。
也许您忘记清除缓存和 cookie。实际上，您可以将cover 更改为contain 或100% 100% 任何您想做的事情，但我建议这个问题使用cover。最后，要不要点击勾选按钮留下我的答案。以便其他用户知道正确答案。
Mr.Habib 你能帮我在下面的链接...stackoverflow.com/questions/39740988/…

【解决方案2】：

移除宽度 100% 并设置 background-size: cover 并移除 html, body 部分。您使用引导程序，因此您无需定义它

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>

【讨论】：

感谢Mostafa先生的回复。我现在得到了解决方案。
Mr.Mostafa 你能帮我在下面的链接..stackoverflow.com/questions/39740988/…
@Hybreeder 我可以帮助你。但一个问题是我可以改变结构吗？也许我会为您提供更好的导航，它响应迅速且看起来也不错。