Fit Website Background Image to Screen Size

.main-section {

/* full screen background image "fire in background" */

  background: url('bg-img.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  /* height of this section 100% of the viewport height */
  
  height: 100vh;
  
  /* borders */
  
  border-bottom: 1px solid rgb(15, 13, 13);
  border-top: 1px solid rgb(15, 13, 13);
  
  /* align item "container" to center of page */
  
  display: grid;
  place-items: center;
  text-align: center;
}

<!-- full screen section display grid for alignment -->

        <section class="main-section">
        
                <!-- contains bg-logo and buttons container -->
                
                <div class="container">
                
                    <!-- "background image" logo only -->
                    
                    <img class="background-logo" src="bg-logo.png" alt="Sample Image">
                    
                    <!-- buttons -->
                    
                    <div class="buttons">
                        <a href="#" class="btn-red">BUY NOW</a>
                        <a href="#" class="btn-white">WATCH TRAILER</a>
                    </div>
                </div>
        </section>

fit background image to browser width and expand height if necessary

I think the other commenters are ignoring your request for help in not "cropping" the image, when they keep suggesting use of background-size: cover.

Here's what I've gathered are your requirements:

• An image to be a background, behind the content of your site.
• The background image has a specific aspect ratio and should not be cropped
• If the browser window doesn't match the images aspect ratio, it should allow scrolling vertically, but should always fit to the windows width.

A css only solution...

body {
  position: relative;
  margin: 0;
}
body::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 0;
  /* height / width = ratio% */
  /* 2853px / 869px = 328.3084% */
  padding-bottom: 328.3084%;
  padding-bottom: calc(2853 / 869 * 100%);
  background: url('//placekitten.com/869/2853') center top / 100% auto no-repeat;
}

Replace the url with the url of your image, and if the image pixel dimensions change, update those in the way I have commented out how padding-bottom should be calculated.

This creates a separate background element inside the body of the website and still allows you to have whatever content you want inside your site. But keep in mind, if you're on a very small screen, say 320px/480px, and the websites content becomes very tall because of the narrow width of the screen, this background image could be scrolled passed to account for the content. That won't break this code, but I would just suggest adding a background color or texture to your html element, which would show below the image in this case. Good luck.

Dynamically size the background image to fit the window

The vh unit can be used to set the height of the backgrounds. In the following example however, I have used it to set the height of divs, and let the background images have auto width, 100% height:

body {  margin: 0;}
#menu {  position: fixed;  left: .5em;  top: .5em;  right: .5em;  padding: .5em;  background-color: rgba(255, 255, 255, .7)}
.item {  height: 100vh;  background-size: auto 100%;  background-position: center center;}
#item-1 {  background-image: url(https://dummyimage.com/200x100/FC0/FFF&text=Background+Image);}
#item-2 {  background-image: url(https://dummyimage.com/200x100/F0C/FFF&text=Background+Image);}
#item-3 {  background-image: url(https://dummyimage.com/200x100/0CF/FFF&text=Background+Image);}

<div id="menu">  <a href="#item-1">Item 1</a>  <a href="#item-2">Item 2</a>  <a href="#item-3">Item 3</a></div><div id="item-1" class="item"></div><div id="item-2" class="item"></div><div id="item-3" class="item"></div>