'Website header display differently on two different computers

I came across something that I didn't think was possible, but I have a different header display on two different machines for the same exact website, one of which displays fine, and the other one being a broken mess. Here's the display on PC, which is the right one, and here's the broken header, which is displayed on my laptop. I have no idea why the image gets spliced like that, I have tried using background-repeat : no-repeat, but it just splits the image in the middle of the page. Here's my HTML :

<!DOCTYPE html>
<html lang = "fr">
    <head>
        <title>Agence ReArt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href = "ReArt.css" rel = "stylesheet" media = "all" type = "text/css">
    </head>
        <body>
            <header id = bannière>
                <h1>ReArt</h1>
                <button id = "centerButton" class = "button">Placeholder</button>
                <button id = "rightButton" class = "button">Nous contacter</button>
                <button id = "leftButton" class = "button">Nous découvrir</button>
            </header>
            
        </body>
    
</html>

And my CSS :

header#bannière {
    display : center;
    height : 225px;
    max-width: 100%;
    align-items : center;
    color : #1BBCED;
    text-shadow : #000 0 0 .2em;
    background-image : url(./Ressources/landscape.jpg);
}
header#bannière > h1 {
    font: bold calc(1em + 2 * (100vw - 120px) / 100) 'Dancing Script', cursive, fantasy;
    text-align : center;
}
.button {
    margin : 0;
    position : absolute;
    -ms-transform: translate(-50%, -50%);
    transform : translate(-50%, -50%);
    background-color: transparent;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font : bold calc(1em + 2 * (50vw - 80px) / 100) 'Dancing Script', cursive, fantasy;
    white-space: nowrap;
}
button#centerButton {
    top : 25%;
    left : 50%;
}
button#rightButton {
    top: 25%;
    left: 90%;
}
button#leftButton {
    top: 25%;
    left: 10%;
}
body {
    background-color : white; /* #A55C9F #1BCCED #243797 */
}

This is obviously nothing professional, nothing more than a school project, but not knowing how to fix this or even where it comes from is annoying. Thank you to whoever will take the time to answer my question!

htmlcssgoogle-chromepython-3.xblender


Solution 1:[1]

You are probably looking for background-size: cover in combination with background-repeat: no-repeat for your header image.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Solution 2:[2]

You should set width of background image to 100vw. It translates to 100% of Viewport Width, which means the image will now occupy 100% of available screen width independently of its actual size.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kristian Nilsson
Solution 2 Max Tuzenko

Related Questions