Wie verhindere ich, dass mein Hintergrundbild schrumpft?

Question

Ich habe ein Hintergrundbild für meine Bootstrap-Zeile. Wenn ich das Browserfenster verkleinere (verkleinere), verkleinert sich das Bild.

Ich versuche es so zu machen, dass das Bild zentriert bleibt und nicht schrumpft. Wenn ich den Browser verkleinere, sollte das Bild in der Seite zentriert bleiben und seine Kanten werden im Grunde unsichtbar.

Ich habe folgendes CSS:

.my-bootstrap-row { 
    background-image: url(foo.jpg); 
    background-position:fixed; 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
    height:700px; /* image height is also 700px */ 
} 

und HTML folgende:

<div class="row my-bootstrap-row"> 
    blah blah 
</div> 

Was ich hier fehlt?

Answer 1

Sein schrumpft Nur weil Sie background-size: 100% 100%; gesetzt Setze Dein background-size: cover; und auch für Hintergrundbild zu tun, dass hier, in der Mitte background-image: url(foo.jpg) center center;

.my-bootstrap-row { 
background-image: url(foo.jpg) center center no-repeat; 
background-position:fixed; 
background-size: cover; 
background-repeat: no-repeat; 
height:700px; /* image height is also 700px */ 

Answer 2

Nach Sie Code, um die Fehler suchen

.my-bootstrap-row { 
    background-image: url(foo.jpg); 
    background-position:fixed; 
    background-size: 100% 100%; //ERROR making the image shrink with the window remove this and set is as cover. 
    background-repeat: no-repeat; 
    height:700px; /* image height is also 700px */ 
} 

Try etwas wie das,

.my-bootstrap-row { 
    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; 
} 

In meinem Code sind die Hintergrundeigenschaften in einer Zeile und ich habe auch die Size-Eigenschaft hinzugefügt, um andere Browser nur für den Fall zu unterstützen.

Answer 3

Versuchen Sie, wie diese

Sie verwenden background-size: 100% 100% Verwendung background-size: cover

hoffen, dass dies hilft Ihnen

.my-bootstrap-row { 
 
    background-image: url(https://www.axure.com/c/attachments/forum/7-0-general-discussion/3919d1401387174-turn-placeholder-widget-into-image-maintain-interactions-screen-shot-2014-05-29-10.46.57-am.png); 
 
    background-position:fixed; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    height:700px; /* image height is also 700px */ 
 
    
 
}

<div class="row my-bootstrap-row"> 
 
    blah blah 
 
</div>

Answer 4

Ich habe background-size:cover statt background-size:100% 100% verwendet zu tun

.my-bootstrap-row { 
 
    background-image: url('https://peterwardhomes.files.wordpress.com/2014/12/goole-area-shot_005.jpg'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
\t background-position: fixed; 
 
    height:700px; /* image height is also 700px */ 
 

 
}

<div class="row my-bootstrap-row"> 
 
    blah blah 
 
</div>