Bedecken Sie das gesamte Modal mit einem Bild

Question

Ich benutze Materialize CSS. Ich habe ein Modal, und ich möchte den gesamten Hintergrund auf ein Bild einstellen (wenn es geöffnet wird, sieht es so aus, als ob Sie nur ein Bild sehen, schön und groß, mit verschwommenem Hintergrund der Webseite). Das Problem ist, dass wenn ich das mache, das Bild wiederholt wird, wenn das Modal größer ist als es.

Ich möchte das Bild nur über das gesamte Modal strecken.

Mein modal:

<div id="imageModal" class="modal"> 
    <div class="modal-content"> 

    </div> 
</div> 

CSS:

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-reapeat: "none"; 
    height: 50%; 
    width: 100%; 
} 

Answer 1

Sie hatten ein paar Tippfehler mit background-repeat. Versuchen Sie folgendes:

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-repeat: no-repeat; 
    height: 50%; 
    width: 100%; 
} 

Auch wenn Sie CSS3 verwenden, können Sie die background-size Eigenschaft auf cover gesetzt, so wird es nach der Größe Ihres modalen die Größe Ihres Bildes helfen. Wie folgt aus:

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    height: 50%; 
    width: 100%; 
} 

Answer 2

Hallo in Ihrem Stil hinzufügen ...

background-repeat: no-repeat; 

nur inspizieren und den Stil überprüfen, die u background-repeat haben: keine, die Ausstreichen bereits Becz es keine Art, wie das ist so ersetzen Sie einfach die oben ein

Answer 3

dies ausprobieren

#imageModal{ 
    background-image: url("../images/office2.jpg"); 
    background-reapeat: no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height: 50%; 
    width: 100%; 
} 

Referenz hier

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