时间戳

首页 > 解决方案 > 如何使背景图像响应？

html - 如何使背景图像响应？

问题描述

目前，当我调整窗口大小时，div 变得不那么宽，但图像仍然固定在左侧。因此，如果我在移动浏览器上查看它，我会看到图像的左侧。我不知道如何在调整图像大小时始终注视图像的中心，而图像的左侧和右侧变宽。图像为 2560 x 677。

这是我现在拥有的 CSS：

#showcase {
position: relative;
margin: auto;
min-height: 600px;
background: url("banner.png"); }
#showcase .primary-overlay {
background: rgba(0, 0, 0, 0.3);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }

这是相关的div：

<section id="showcase" class="py-5">
<div class="primary-overlay text-white">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="display-1 mt-5 pt-5">
<strong>FILLER TEXT</strong>
</h1>
<p class="lead">BLAH BLAH BLAH </p>
<div class="text-white display-4" id="countdown"></div>

感谢您的任何见解。

标签： htmlcssbootstrap-4

解决方案

用于background-position在元素内定位背景。而且您可能还想background-size用来告诉图像如何调整大小。

#showcase {
    position: relative;
    margin: auto;
    min-height: 600px;
    background-image: url("banner.png");
    background-position: center;
    background-size: contain; /* or cover */
}

推荐阅读