Background cover attribute not working as expected

Question

I have made a background image , 1366px wide and 768px high, which I want to use as background for the main page of my website .

I have each page of my website divided in sections, using the FullPage plugin. This is the main page so I'm using just the first section.

---

What I've tried so far is adding this CSS code to the #first section of my main page:

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

Unfortunately the image gets displayed just partially. In fact it's a little shorter than it actually is.

---

I read the documentation for the background-size attribute, and at the cover attribute it says:

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

So basically how can I make my background-image fit the screen size? Considering the mobile side I think it would be better to fit just the width of it. I'm open for suggestions and help!

Answer 1

Take a look over here: https://www.google.be/amp/s/css-tricks.com/perfect-full-page-background-image/amp/?client=safari

Good luck!