Größe automatisch ändern, wenn die Bildschirmgröße abnimmt

Question

Ich benutze ein Bild als Hintergrund von meinem und es passt perfekt. Wenn ich versuche, die Größe des Bildschirms (Mobile/Tablet-Größe) zu ändern, bleibt das Bild in der Rückseite und wird nicht schrumpfen wie der Bildschirm - nicht reagieren. Ich möchte diesen Effekt ändern und ihn reaktionsfähig machen und kleiner werden, was die Bildschirmgröße betrifft.

Siehe Anhänge.

HTML:

<!-- Header --> 
<header id="top" class="header"> 
    <div class="text-vertical-center"> 
     <h1>Test</h1> 
     <h3>The</h3> 
     <br> 
     <a id="show-panel" href="#" class="btn btn-dark btn-lg">Sign Up</a> 
    </div> 
</header> 

CSS:

/* Header */ 
.header { 
    display: table; 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background: url(../img/coffee.jpg) no-repeat center center scroll; 
    color: #ffffff; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 

Answer 1

Sie können auch versuchen, die absolute Position des Headers div zu verwenden und die Ränder so einzustellen, dass sie immer den gesamten Bereich abdecken. Ich habe hier ein Beispiel basierend auf deinem Code erstellt. https://codepen.io/morganfens/pen/NjJBJB

.header { 
background: url(../img/coffee.jpg); 
position: absolute; 
top:0; 
bottom:0; 
right:0; 
left:0; 
background-repeat:no repeat; 
background-size:cover; 
color: #ffffff; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
-o-background-size: cover; 
} 

Answer 2

Versuchen Sie, die Breite und Höhe zu verwenden, vw und vh statt% Hochschalten. Anstatt scroll als Position auf der background-image -Eigenschaft zu verwenden, verwenden Sie fixed. Ich habe es in jsfiddle probiert.

.header { 
    display: table; 
    position: relative; 
    width: 100vw; 
    height: 100vh; 
    background: url(http://lorempixel.com/1920/1080/food) no-repeat center center fixed; 
    color: #ffffff; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
} 

Answer 3

Sie können diese CSS-Code verwenden:

html { 
    background: url(img.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

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

Denken Sie daran, einige der Forschung zu tun, bevor Sie eine Frage stellen! Eine schnelle Suche nach "css full background image" bei Google gibt Ihnen viele gute Antworten.