Атрибут обложки фона работает не так, как ожидалось

Question

Я сделал фоновое изображение, 1366px wide и 768px high, которое я хочу использовать в качестве фона для главной страницы своего website.

У меня есть каждая страница моего сайта, разделенная на разделы, с использованием плагина FullPage. Это главная страница, поэтому я использую только первый раздел.

---

То, что я пытался до сих пор добавляет этот CSS код в #First части моей главной странице:

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

К сожалению, изображение получает отображается только частично. На самом деле он немного короче, чем есть на самом деле.

---

Я прочитал documentation для фона размера атрибута, и на обложке приписывать он говорит:

Масштаб фоновое изображение, чтобы быть как можно больше, так что фон область полностью покрыта фоновым изображением. Некоторые части фонового изображения могут не быть в поле зрения в фоновом режиме позиционирования области

Так в основном, как я могу сделать мое фоновое изображение по размеру экрана? Учитывая мобильную сторону, я думаю, что было бы лучше подогнать ее по ширине. Я открыт для предложений и помощи!

Answer 1

Посмотрите здесь: https://www.google.be/amp/s/css-tricks.com/perfect-full-page-background-image/amp/?client=safari

Удачи!