Hintergrund-Größe: Abdeckung nicht Einstellung Höhe des Hintergrundbildes

Question

Ich versuche, ein Hintergrundbild zu einem div vollständig zu füllen.

Verwendung

.class{ 
    background-image: url('img.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

und (.row ist aus Foundation 6)

<div class="row columns"> 
    <div class="class">&nbsp;</div> 
</div> 

Das Bild über die Breite des Behälters erstreckt, jedoch die Höhe nur etwa 23px ist, wahrscheinlich die Linienhöhe der  . Wie kann ich erreichen, dass die Höhe des Bildes die volle Höhe des Bildes mit der von cover eingestellten Breite hat?

Answer 1

Ich bin neu in Foundation 6, aber wenn Sie alle div ausfüllen und mit der Breite und Höhe anpassen möchten: Ich verwende diesen Code für den Hintergrund und arbeiten auch direkt in div: (Dies ist von: https://css-tricks.com/perfect-full-page-background-image/)

.class { 

background: url(demo.jpeg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

} 

auch, wenn Sie Hintergrundgröße angeben möchten, verwendet:

background-size: 80px 60px; 

können Sie verwendet:

@media screen {} 

Wenn Sie den Hintergrund oder einen beliebigen Teil der CSS-Klasse, basieren auf der Größe des Bildschirms

Wichtig anpassen möchten, prüfen Sie: margin:0px; or padding:0px;

Lassen Sie mich wissen, wenn diese Ihnen helfen, oder wenn Sie etwas brauchen spezifischer.