Solution 1 :

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

Problem :

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:
enter image description here

Problem is, if I use background-repeat:no-repeat it does this
enter image description here

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.


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

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

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


        <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>
            <a href='#' class='btn btn__orderButton'> Order Now</a>



.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;

    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.


Comment posted by noobcoderiam

only issue with that is most of my image is cropped out.

Comment posted by Jacob Lockard

The only problem with