Kevin Powell - Community•2mo ago

Background image not covering the whole page in mobile Chrome browser.

I guess the address bar cause the issue I tried to give body and html 100lvh but it does not worked. This is the properties that I'm using:

body {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 200;
    background-image: url('assets/destination/background-destination-desktop.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    overflow-x: hidden;
}

body {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 200;
    background-image: url('assets/destination/background-destination-desktop.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    overflow-x: hidden;
}

4 Replies

Mannix•2mo ago

try puting it on the html element 🙂

IxtiyarOP•2mo ago

Putting what background image or 100lvh ?

Mannix•2mo ago

background-image also do you need the 100lvh at all?

IxtiyarOP•2mo ago

did not work with or without 100lvh or 100% still jumping 😔

html {
    height: 100lvh;
    background-image: url('assets/destination/background-destination-desktop.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    overflow-x: hidden;
}

html {
    height: 100lvh;
    background-image: url('assets/destination/background-destination-desktop.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    overflow-x: hidden;
}

Gaming

Programming

Background image not covering the whole page in mobile Chrome browser.