CSS 背景图像太大答案

【问题标题】：CSS Background Image Too LargeCSS 背景图像太大
【发布时间】：2016-05-06 03:19:42
【问题描述】：

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

#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

我正在尝试制作图像（虽然非常大，以适合背景。

有什么想法吗？

【问题讨论】：

那不是背景图片。您正在将图像插入#bg div。你在哪里定义背景图像。我在您的代码或页面源代码中没有看到它
这里是 bg img #bg img { position: absolute;左：0；右：0；底部：0；边距：自动；最小宽度：50%；最小高度：50%； }
您是在尝试设置背景图像或包含图像的 div 的样式吗？因为您的标题说的是背景图片，但您的代码说它是 div 内的图片？
div 应该包含图像。但它也应该用作背景。有意义吗？
这能回答你的问题吗？ Background images: how to fill whole div if image is small and vice versa

标签： css background-image css-position

【解决方案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);
}

并从 #bg 元素中删除 img：

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

顺便说一句，对于这种背景图像而言，这不是好图像（有被砍头的风险）。

【讨论】：

【解决方案2】：

background-size: 100% auto;

将调整图像大小以适应视口宽度，高度根据纵横比做出反应。如果你宁愿以身高领先，那么它是：

background-size: auto 100%;

more info about background-size

【讨论】：