Php 背景未在移动视图上调整_Php_Html_Css_Responsive Design_Background Image

Php 背景未在移动视图上调整

php html css responsive-design

Php 背景未在移动视图上调整,php,html,css,responsive-design,background-image,Php,Html,Css,Responsive Design,Background Image,我的背景不会随窗口一起调整大小。它会在窗口变大时进行调整，而不是在我调整窗口变小时进行调整背景尺寸：封面不利于调整大小全屏正常尺寸：手机大小 HTML <body> <?php require_once('header-only.php'); require_once('header-addon.php'); ?> <div class="bg-newest"> <br><div class="conta

我的背景不会随窗口一起调整大小。它会在窗口变大时进行调整，而不是在我调整窗口变小时进行调整

背景尺寸：封面不利于调整大小

全屏正常尺寸：

手机大小

HTML

<body>
  <?php require_once('header-only.php');
       require_once('header-addon.php'); ?>

 <div class="bg-newest">
   <br><div class="container pt-5"><br>
   <br><h2 class="bold-font color-black p-left-15 pt-5">Newest</h2>
   <br><br><br>
       </div>
 </div>
</body>

看起来你的背景元素已经延伸过了屏幕，有点像这样

要解决这个问题，我建议将背景元素的宽度设置为100%

（对不起，图像太大了，我不知道如何缩放）

我建议将“.bg newest”元素的宽度设置为100%，背景大小属性设置为“contain”。此外，您还需要减少填充顶部值

最新版本

HTML

<body>
   <?php require_once('header-only.php');
    require_once('header-addon.php'); ?>

 <div class="bg-newest">
  <br><div class="container pt-5"><br>
  <br><h2 class="bold-font color-black p-left-15">Newest</h2>
   <br><br><br>
   </div>
  </div>
 </body>

尝试将背景图像大小设置为100%

  .bg-newest {
    background-size: 100% 100%;
  }

尝试添加背景大小：100%背景图像似乎100%覆盖了高度。当页眉更改比率时，您希望图像在移动版本中的外观如何？希望图像适合移动视图（相同外观）当您有

封面

且容器的比率与背景图像不同时，图像的外观将不同。您需要使用

contain

而不是

cover

。但是，除非盒子与图像的比例相同，否则它不会同时占据盒子的100%宽度和高度。使用移动视图的媒体查询，将

背景大小设置为100%
，如果适合您的屏幕，您也可以将其设置为包含。
 .bg-newest {
  width: 100%;
  background-image: url('MY-IMAGE-LINK');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.bg-newest h2{
   padding:top: 5em;
}

@media screen and (max-width: 700px) {
 .bg-newest h2{
   padding:top: 2em; /* Reduce padding top */
 }
}

  .bg-newest {
    background-size: 100% 100%;
  }