Atribút krytu pozadia nefunguje podľa očakávania - html, css, pozadie-obrázok, veľkosť pozadia

Urobil som obrázok na pozadí, 1366px široký a 768px vysoký, ktoré chcem použiť ako pozadie pre svoju hlavnú stránku webové stránky.

Každá stránka môjho webu je rozdelená do sekcií pomocou doplnku FullPage. Toto je hlavná stránka, takže používam iba prvú časť.

To, čo som sa doteraz pokúsil pridať je CSS kód do # prvej časti mojej hlavnej stránky:

#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;
}

Obrázok sa bohužiaľ zobrazí iba čiastočne. V skutočnosti je to o niečo kratšie, ako v skutočnosti je.

Čítal som dokumentácia pre background-size a na atribúte cover uvádza:

Zväčšite mierku obrázka na pozadí tak, aby oblasť pozadia bola úplne pokrytá obrázkom na pozadí. Niektoré časti obrázka na pozadí nemusia byť v oblasti pozícií na pozadí

Ako teda v podstate môžem nastaviť, aby sa môj obrázok na pozadí prispôsobil veľkosti obrazovky? Vzhľadom na mobilnú stránku si myslím, že by bolo lepšie prispôsobiť sa iba jej šírke. Som otvorený pre návrhy a pomoc!

odpovede:

Pozrite sa sem: https://www.google.be/amp/s/css-tricks.com/perfect-full-page-background-image/amp/?client=safari

Veľa štastia!