背景大小:封面使背景图像全尺寸而不是适合div

时间:2014-12-18 15:22:32

标签: javascript html css background background-image

。你好,我正在试图找出为什么当我在一个图像上使用background-size: cover时,javascript图像不会缩小到div的大小,而是保持全尺寸只有部分div中的内容是可见的。

我已经考虑过将javascript设置为背景图像时使用javascript来设置图像属性,但这似乎是一个hacky解决方案,并没有解决我显然在某处做的问题。

对于我出错的地方有任何帮助或见解将不胜感激!非常感谢你!

CSS:

#module-background
    {
        text-align: center;
        height: 400px;
        width: 400px;
        margin: 0;
        padding: 0;
        font-size: 2em;
        color: #fff;
        background: #888;
        background-size: cover;

        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    #module-background a 
    {
        color: #fff;
    }

    #module-background h1 
    {
        font-size: 2em;
        padding: 0 0.3em;
        line-height: 1em;
    }

    #module-background p 
    {
        padding: 0 1em;
    }

    #module-background section 
    {
      min-height: 100%;
      text-shadow:  -1px -1px 0 #000,
                    1px -1px 0 #000,
                    -1px 1px 0 #000,
                    1px 1px 0 #000;  
    }

HTML

<div>
    <section  id="module-background">
        <h1 id="city">Dummy Text</h1>
        <p>
            <span id="temperature">
            </span>
            <span id="weather">
                Current temperature and weather conditions
            </span>
        </p>
    </section>
</div>

1 个答案:

答案 0 :(得分:2)

从CSS样式中删除此行:

background-attachment: fixed;

应该这样做。