L'attribut de couverture de fond ne fonctionne pas comme prévu

Question

J'ai fait un image d'arrière-plan, 1366px de large et 768px de haut, que je veux utiliser comme toile de fond pour la page principale de mon website.

J'ai chaque page de mon site Web divisé en sections, en utilisant le plugin FullPage. C'est la page principale donc j'utilise juste la première section.

---

Ce que j'ai essayé jusqu'à présent est d'ajouter ce code CSS à la section #premier de ma page principale:

#first{ 
     width: 500px; 
     height: 500px; 
     background-image: url(images/ClanshnowXmasEventSmall.jpg) no-repeat center center; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 

Malheureusement l'image affichée que partiellement obtient. En fait, c'est un peu plus court qu'il ne l'est en réalité.

---

Je lis la documentation pour l'attribut background-size, et à la couverture d'attribut il est dit:

échelle l'image de fond soit aussi grande que possible pour que l'arrière-plan la zone est entièrement couverte par l'image de fond. Certaines parties de l'image d'arrière-plan ne peut pas être vue dans la zone de positionnement de fond

Donc, fondamentalement, comment puis-je faire mon background-image s'adapter à la taille de l'écran? Compte tenu du côté mobile, je pense qu'il serait préférable d'adapter juste la largeur de celui-ci. Je suis ouvert aux suggestions et à l'aide!

Answer 1

Jetez un oeil ici: https://www.google.be/amp/s/css-tricks.com/perfect-full-page-background-image/amp/?client=safari

Bonne chance!