Размер фона: обложка делает фоновое изображение полноразмерным, а не фиолетовым.

Question

. Привет, я пытаюсь понять, почему, когда я использую background-size: cover на изображении, которое помещается в качестве фона div javascript, что изображение не уменьшается до размера div, а вместо этого остается в полном размере, где только часть, находящаяся в div видна.

Я подумал об использовании javascript для установки атрибутов изображений, когда он установлен в качестве фонового изображения, но это кажется хакерским решением и не решает проблему, которую я явно делаю где-то.

Любая помощь или понимание относительно того, куда я иду не так, будем признательны! Спасибо огромное!

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> 

Answer 1

Удалите эту строку из вашего CSS Style:

background-attachment: fixed; 

Это следует сделать трюк.