Responsive background-image

Hello!

I have got a problem with background-image responsive. When I resize site into lower sizes then top photo is ok (smaller) but it is margin and bottom spacing. I have no idea how to do it correctly?

HTML, CSS code

Layout

‘’’

    <meta charset="utf-8">
    <meta name="description" content="Montaż Mebli Warszawa. Profesjonalny i SZYBKI montaż mebli na terenie Warszawy i Okolic. Kontakt 502-618-323 ✅ Zadzwoń i zapytaj o DARMOWĄ wycenę!">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" src="style.css">
    <title>Montaż Mebli Warszawa</title>
    
    <style>
        
        body {
            margin: auto;
            max-width: 1280px;
        }
        
        header {
            margin: 0px auto;
            max-width: 1280px;
            height: 189px;
            display: flex;
            border: 1px solid green;
        }
        
        .top-background {
            margin: 0px auto;
            max-width: 980px;
            height: 189px;
            display: flex;
            border: 1px solid green;
        }
        
        .logo-background {
            margin-top: auto;
            margin-bottom: auto;
            max-width: 506px;
            height: 62px;
            background-color: #172438;
            display: flex;
            border: 1px solid green;
        }
    
        .img-logo {
            margin: 7px 0px 7px 7px;
            width: 86px;
            height: 48px;
        }
        
        .logo-title {
            margin-top: auto;
            margin-bottom: auto;
            margin-left: 29px;
            margin-right: 37px;
            font: 20px Spartan ExtraBold;
            color: #fff;
            text-transform: uppercase;
        }
        
        .upper-menu {
            margin-top: auto;
            margin-bottom: auto;
            margin-left: 68px;
        }
        
        .upper-menu ul {
            margin: 0px;
            padding: 0px;
            list-style-type: none;
        }
        
        .upper-menu ul li {
            margin-left: 24px;
            float: left;
        }
        
        .upper-menu ul li a {
            font: 11px Spartan ExtraBold;
            color: #20201f;
            text-transform: uppercase;
            text-decoration: none;
        }
        
        .upper-menu ul li a:hover {
            text-decoration: underline;
        }
        
        .top {
            margin: 0px auto;
            position: relative;
            vertical-align: middle;
            width: 100%;
            height: 819px;
            background-image: url("img/photo-background.jpg");
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center;
            border: 1px solid green;
        }
        
        .button-background {
            vertical-align: middle;
            margin: 0;
            position: absolute;
            text-align: center;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 665px;
            height: 252px;
            background-color: #ff5a00;
            border: 1px solid red;
        }
        
        .top h2 {
            margin-top: 69px;
            vertical-align: middle;
            font: 30px Spartan ExtraBold;
            color: #fff;
            text-transform: uppercase;
            top: 50%;
            left: 50%;
        }
        
        .button {
            width: 251px;
            height: 64px;
            display: inline-block;
            line-height: 32px;
            background: #fff;
        }
        
        .button a {
            display: inline-block;
            vertical-align: middle;
            font: 18px Spartan Black;
            color: #000;
            text-transform: uppercase;
            text-decoration: none;
        }
        
        .button p a:hover {
            text-decoration: underline;
        }
        
        @media only screen and (max-width: 800px) {
            
            .top {
                margin: 0px auto;
                padding: 0px;
                vertical-align: middle;
                width: 100%;
                height: 819px;
                background-image: url("img/photo-background.jpg");
                background-size: 100%;
                background-repeat: no-repeat;
                background-position: center;
                border: 1px solid green;
            }
            
            .button-background {
                vertical-align: middle;
                margin: 0;
                padding: 0px;
                position: absolute;
                text-align: center;
                transform: translate( -50%, -50%);
                width: 70%;
                height: 144px;
                background-color: #ff5a00;
                border: 1px solid red;
            }
            
            .top h2 {
                margin-top: 24px;
                vertical-align: middle;
                font: 18px Spartan ExtraBold;
                color: #fff;
                text-transform: uppercase;
                top: 50%;
                left: 50%;
            }
            
            .button {
                width: 144px;
                height: 48px;
                display: inline-block;
                line-height: 24px;
                background: #fff;
            }
        
        .button a {
                display: inline-block;
                vertical-align: middle;
                font: 14px Spartan Black;
                color: #000;
                text-transform: uppercase;
                text-decoration: none;
            }
        }
    
    </style>
    
</head>

<body>
    
    <header>
        
        <div class="top-background">
        
            <div class="logo-background">

                <img class="img-logo" src="img/logo.jpg" alt="Montaż Mebli Warszawa Logo">

                <h1 class="logo-title">MontazMebliWarszawa.pl</h1>

            </div>

            <div class="upper-menu">

                <ul>
                    <li><a href="">Strona główna</a></li>
                    <li><a href="">Oferta</a></li>
                    <li><a href="">O nas</a></li>
                    <li><a href="">Blog</a></li>
                    <li><a href="">Kontakt</a></li>
                </ul>

            </div>
            
        </div>
    
    </header>
    
    <section>
    
        <div class="top">
            
            <div class="button-background">
                
                <h2>Montaż i skręcanie mebli</h2>
                
                <div class="button">
                    
                    <p><a href="">Zobacz</a></p>
                    
                </div>
            
            </div>            
        
        </div>
    
    </section>
    
    <aside>
        
        <div class="left-container">
            
            <h1>Montaż i skręcanie mebli</h1>
            
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet varius justo. Nunc rhoncus sit amet neque ornare imperdiet. Mauris sed nibh scelerisque, accumsan mi et, volutpat elit. Morbi suscipit elit ac ullamcorper varius. Quisque sapien lorem, condimentum quis pretium eget, imperdiet et urna. Nunc auctor vitae arcu ut faucibus. Maecenas vel venenatis magna. Praesent molestie consequat leo ut placerat. Pellentesque dictum, magna a maximus vestibulum, massa orci malesuada sem, ac fermentum metus dui ac nibh. Mauris tempor porttitor nulla, id cursus nisl placerat nec.                 
            </p>
            
            <img src="">
            
            <p>
                Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas molestie congue augue, nec viverra dolor posuere eu. Ut neque nisl, varius vitae felis malesuada, gravida maximus est. Nam efficitur enim nisi, quis congue nulla placerat nec. Suspendisse porta risus eros, ac faucibus elit tincidunt eu. 
            </p>
            
            <div>
                
                <div class="gallery">
                    
                    <h3>Galeria</h3>
                
                </div>
                
                <div class="references">
                    
                    <h3>Galeria</h3>
                
                </div>
                
                <div class="references">
                
                    <h3>Usługi</h3>
                
                </div> 
                
            </div>
        
        </div>
        
        <div class="right-cointaner">
            
            <h1>Kontakt</h1>
            
            <p>
                Profesjonalny i SZYBKI montaż mebli na terenie Warszawy i okolic. Zadzwoń i zapytaj o szczegóły. Dojazd do klienta oraz wycena usług ZA DARMO! Skorzsytaj z naszych usług.
                100% profesjonalizmu.
            </p>
            
            <h2>
                Telefon:
            </h2>
            <p>
                502-618-323
            </p>
            
            <div class="our-company">
                
                <h2>Nasza firma</h2>               
            
            </div>
            
            
            
            
        </div>        
    
    </aside>
    
    <aside>
        
        <h1>Czym się zajmujemy</h1>
        
        <p>
            Montaż Mebli Warszawa. Składanie, Skręcanie, Mebli IKEA, Usługi Stolarskie
            Oferujemy profesjonalną instalację oraz montaż mebli na terenie Warszawy producentów takich jak: IKEA, BRW, Bodzio, Agata Meble, ABRA, Black Red White, Leroy Merlin, JYSK.
            Profesjonalni fachowcy w przystępnej cenie.
            Montaż mebli Warszawa to Profesjonalny i SZYBKI montaż mebli na terenie Warszawy i Okolic. Zadzwoń i zapytaj o szczegóły. Dojazd do klienta oraz wycena usług ZA DARMO przy skorzystaniu z naszych usług. Jesteśmy profesjonalistami w każdym calu. Do każdego zlecenia podchodzimy indywidualnie i z pełną odpowiedzialnością.

            Poza meblami od tych producentów, zrealizujemy również dla Was montaż wszystkich innych mebli. Mamy kilkunastoletnie doświadczenie w tym co robimy. Niestraszne nam skomplikowane zlecenia montażu najprzeróżniejszych mebli.


            W naszym zakresie usług znajdziesz także fachową realizację konstrukcji i kompozycji mebli do pokoi i pomoc w wyborze odpowiednich mebli. Montaż dedykowanych rozwiązań meblowych? Tym też się dla Ciebie zajmiemy. Aranżacja, wystrój wnętrz i rozmieszczenie mebli do pokoi – to także znajdziesz w wachlarzu naszych usług.

            Montaż Mebli Warszawa odbywa się w sposób bardzo bezpieczny i odpowiedzialny. Zabezpieczamy odpowiednio miejsce pracy oraz dbamy o podłogi przed uszkodzeniem. Dysponujemy profesjonalnymi narzędziami do składania mebli. Działamy dynamicznie i fachowo.
            Potrzebujesz fachowców? Nie czekaj! Zadzwoń do nas już teraz!
        </p>
    
    </aside>
    
    <footer>
        
        <div class="left-footer">
        
        </div>
        
        <div class="right-footer">
            
            <ul>
                <li><a href="">Strona główna</a></li>
                <li><a href="">Oferta</a></li>
                <li><a href="">O nas</a></li>
                <li><a href="">Blog</a></li>
                <li><a href="">Kontakt</a></li>
            </ul>
            
            <p>Wszelkie prawa zastrzeżone - </p>
            <a href="">MontazMebliWarszawa.pl</a>
            <p> - 2020 (C)</p>
        
        </div>     
        
        
    </footer>
    
</body>
'''

Perhaps you need background-size:cover rather than 100% if you have a fixed height container.

 .top {
            margin: 0px auto;
            position: relative;
            vertical-align: middle;
            width: 100%;
            height: 819px;
            background-image: url("img/photo-background.jpg");
          /*  background-size: 100%;*/
background-size:cover;            
background-repeat: no-repeat;
            background-position: center;
            border: 1px solid green;
        }

‘Cover’ will cover the whole area but your 100% leaves the height to auto I believe which will not fill the element.

Yes. It works. Thanks Paul.