Question

我的网站上有背景图片的以下代码。

#bg {
height: 200%;
left: -50%;
position: fixed;
top: -50%;
width: 200%;
}

  <div id="bg">
    <img alt="" src="sites/all/themes/marques/images/sponsors.png"  id="bg1">
</div>

链接在这里：

http://dev-marquesogden.pantheon.io/sponsors

我正在尝试制作图像（尽管非常大，以适应背景。

有什么想法吗？

Answer 1

这应该做的工作

#bg {
    position: fixed;
    /* top: -50%; */
    top: 0;
    /* left: -50%; */
    width: 100%;
    height: 100%;
    background-size: cover;
    background-image: url(/sites/all/themes/marques/images/sponsors.png);
}

并从img元素中移除#bg：

<div id="bg"></div>

顺便说一下，这对于这种背景图像来说并不是一个好的形象（有可能削减头部的风险）。

Answer 2

background-size: 100% auto;

将调整图像的大小以适合视口宽度，高度根据纵横比进行反应。如果你更喜欢高度领先，那就是：

background-size: auto 100%;

more info about background-size

CSS背景图像太大

2 个答案: