If you want the image to cover the whole area use background-size: cover instead of contain.

Trying to put together a hero image but it seems like when I use background-size:contain my image repeats itself like in the below screenshot:

Problem is, if I use background-repeat:no-repeat it does this

ALL Im trying to do is have a 75vh hero image with that image showing full. Not sure what I am doing wrong but it’s been a long time since I touched CSS.

HTML

<div class='header'>
    <div class='header__navbar'>

        <div class=header__navbar-media>
            <!-- used for first block to center logo -->
        </div>

        <div class='header__navbar-logo'>
            <a href="/"><img src="../img/logo-lospallos22.png" class='header__navbar-logo-img'></a>

        </div>

        <div class='header__navbar-order'>
            <div class='header__navbar-order-account'>
                <a href="#" class='login-nav'>Login</a>
                <a href="#" class='login-nav'>|</a>
                <a href="#" class='login-nav'>Register</a>
            </div>
            <a href='#' class='btn btn__orderButton'> Order Now</a>
        </div>  

    </div>

CSS

.header {
    background-image: url(../img/bg.jpg);
    height: 75vh;
    padding-top: 2rem;
    max-width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
}

*, *::after, *::before{
    box-sizing: inherit;    
    padding: 0;
    margin: 0;
}

html{ /*Root font size is set in the html selector*/
    font-size: 62.5%; /* This is the font size we want(10px) divided by default root font size. 10/16 = .625*/
                      /*The reason we use percentage instead of hardcoded pixels is because it allows end users to change font size for vision purposes in their browser..*/
}

a:link, a:visited{
    text-decoration: none;
}

a{
    color: inherit;
}

All the items within header are flex items so i left out that CSS because I dont believe it will add any value.