Wie kann ich mein CSS-Hintergrundbild mit der Fenstergröße skalieren?

Question

Ich baue meine erste Live-Site und ich bemerkte, dass das Hintergrundbild nicht mit dem Fenster schrumpft, dann wird die Größe geändert. Der Rest der Website wird skaliert, aber das Hintergrundbild sieht aus, als ob es sich um den gesamten Bildschirm handelt. Ich kann nur annehmen, dass dies bedeutet, dass es nicht vollständig sichtbar ist, aber in kleineren Geräten abgeschnitten wird. Was verursacht dies und wie kann ich es beheben? Hilfe bei diesem würde sehr geschätzt, dank

Ich stellte nur den allgemeinen Teil meiner css die nicht ansprechbar Teil der gesamten Website geteilt, aber Rest ist in der jsfiddle https://jsfiddle.net/zd00nmce/5/

html,body{ 
     min-height: 100vh; 
    } 
    body{ 
     margin: 0px; 
     background-image: linear-gradient(0, rgba(0,0,0,.8) 30%, rgba(0,150,255,.8) 100%), url("images/mainCover.jpg"); 
     background-repeat: no-repeat; 
     background-size: cover; 
    } 
    img{ 
     max-width: 100%; 
    } 
    h1,h2,h3{ 
     font-family: arial; 
     text-align: center; 
     margin: 20px auto; 
    } 
    ul{ 
     list-style: none; 
     text-align: center; 
     padding: 0; 
    } 
    a:visited,a{ 
     color: black; 
    } 
    section{ 
     margin: 5%; 
     color: white; 
    } 
    section > article{ 
     padding: 1em; 
     background-color: rgba(0,0,0,.5); 
     border-radius: 15px; 
     margin: 10px; 
    } 

    section h2, section h3{ 
     text-align: center; 
    } 
    section h2{ 
     font-size: 1.3em; 
     text-shadow: 3px 3px 3px rgba(0,0,0,.5); 
    } 
    section h3{ 
     font-size: 1.1em; 
    } 
    /*nav and header*/ 
    header{ 
     background-color: rgba(255,165,0,.8); 
     display: flex; 
     flex-flow: row wrap; 
     justify-content: center; 
     border-bottom: 8px solid black; 
    } 

    header h1{ 
     text-align: center; 
     margin: 0; 
     padding: 15px; 
     font-size: 1.5em; 
     text-shadow: 5px 5px 5px rgba(0,0,0,.3); 
    } 
    header h1, nav a{ 
     font-weight: 700; 
     font-family: arial; 
    } 

    header nav{ 
     position: fixed; 
     bottom: 0; 
     width: 100%; 
     z-index: 1; 
     // background-color: rgba(255,165,0,.8); 
    } 
    .main-nav{ 
     margin: 0; 
     width: 100%; 
     color: white; 
     font-family: arial; 
     font-weight: 600; 
    } 
    nav ul li{ 
     text-align: center; 
     border: 1px solid white; 
     border-radius: 15px; 
     font-size: 1.2rem; 
     background-color:rgba(255,165,0,.8); 
     width: 100%; 
    } 
    .drop-menu-back{ 
     display: none; 
     width: 100%; 
    } 
    a{ 
     text-decoration: none; 
    } 

    nav a:visited, nav a,h1{ 
     color: white; 
    } 

    .main-nav .current-page { 
     background-color: rgba(0,0,0,.5); 
    } 

     /****drop down menu****/ 
    .characters:hover { 
       position: relative; 
       border-radius: 8px 8px 0 0; 
       } 

     .drop-menu{ 
       position: absolute; 
       visibility: hidden; 
       display: block; 
       top: 38px; 
       white-space: nowrap; 
       left: -2px; 
       background-color: rgba(255,165,0,.8); 
       border: 1px solid rgba(0,0,0,.02); 
       box-shadow: 5px 5px 5px 2px rgba(0,0,0,.3); 
       opacity: 0; 
       transition: opacity 300ms ease-in-out 0s; 
       z-index: 1; 
       } 
     .characters:hover .drop-menu{ 
       visibility: visible; 
       opacity:1; 
      } 

Answer 1

Versuchen Sie fügen Sie diese der Körper in Ihrem css:

background-position: center center; 

Dies zentriert Ihr Bild und behält das Seitenverhältnis bei der Größenänderung.

// Lars

Answer 2

CSS Tricks hat eine nützliche Lösung zu diesem Thema.

https://css-tricks.com/perfect-full-page-background-image/

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

Ich glaube, das sein sollte, was Sie suchen.