html - 如何使用 Bootstrap 使图像响应

Question

我一直在下面这个网站上工作，我试图让显示在导航菜单下的横幅响应，一旦你缩小到 iPhone 尺寸纵向，你仍然可以在横幅中看到播放器。

此区域的代码在此处的 css 中。

.tp-page-header {
    background-image: url("../images/page-header.jpg");
    background-repeat: no-repeat;
    padding-bottom: 20px;
    padding-top: 20px;}

网站链接在这里。 http://dagrafixdesigns.com/2019/industrial-darker/about-us.html

此横幅位于每个子菜单链接下方，但主页除外，因为它有 slider 。我不确定是否可以对 CSS 代码做任何事情以使其具有响应性，或者它必须在 HTML 中作为顶部横幅之类的完成。

我已经在一定程度上尝试了 HTML 方式，但我没有运气。

这没什么大不了的，因为如果这行不通，我可以为这个背景获取图像颜色或 css 颜色，但我认为如果它按比例响应会很好用。

谢谢

Answer 1

尝试组合使用 background-size: cover; 和 background-position: 80% 0;。 background-size 会在调整大小时缩小图像以匹配容器大小，background-position 会在 x 轴上向右移动一点，这样您就可以看到足球运动员的头。