KPC
Kevin Powell - Community•4mo ago
Ixtiyar

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
Mannix•4mo ago
try puting it on the html element 🙂
Ixtiyar
IxtiyarOP•4mo ago
Putting what background image or 100lvh ?
Mannix
Mannix•4mo ago
background-image also do you need the 100lvh at all?
Ixtiyar
IxtiyarOP•4mo 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;
}

Did you find this page helpful?