Search code examples
htmlcssbackgroundbackground-size

background-size is not working like it should

I recently changed monitors and now that I'm using a 1920x1080 resolution I've noticed that background-size property is malfunctioning on one of my sites (either that or I've misunderstood how it works for all this time).

The thing is, no matter if I set it to cover nor to 100% 100%. It just will never cover the whole page height (and both html and body tags have min-height: 100vh. I applied a blue background to the body just to check it had the proper size).

The website in question can be found here.

body {
    background: url("../resources/images/bg.jpg") fixed;
    background-size: cover;
    margin: 0;
    color: $c-golden-darker;
    text-shadow: #1a0e0b 0 0 3px, #1a0e0b 0 0 3px;
    font-family: Verdana, Arial;
    overflow-y: scroll;
    min-height: 100vh;
    height: auto;
}

EDIT: After a second look, the image itself is a JPEG so it makes no sense for it to have transparent pixels.

EDIT2: Re-uploading the image to the server somehow fixed the problem.

Solution

  • it's working fine, the problem is in your image which contain an empty space at the end of it.

    enter image description here

    as you see, I just inspect element and change your image with another and it work fine.

    You can also can see the problem of your image here :

    enter image description here