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

此横幅位于每个子菜单链接下，而不是主页，因为它有滑块。我不确定是否可以对CSS代码做任何事情以使其响应，或者它必须在HTML中，就像顶部横幅一样。

我已经尝试过HTML方式，但我没有运气。

不是很大，因为如果这不起作用，我可以获得此背景的图像颜色或css颜色，但是如果它在规模上做出响应，我认为它会很好用。

谢谢

Answer 1

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

Answer 2

我想说，为480制作较小版本的图像是iPhone的像素大小，所以将其设为40并将其居中。要在缩小图像时显示图像，请使用@media（最大宽度480像素）并在块内部，将背景图像设置为新图像

如何使用bootstrap使图像响应

2 个答案: