HTML-Hintergrund Auto-Größenänderung

Question

Ich versuche, ein Bild als Hintergrund festzulegen und es automatisch Größe ändern und automatisch zentrieren, wenn das Fenster die Größe ändert. Im Moment habe ich die Auto-Resize und Auto-Center-Funktion perfekt, aber ich habe keine Ahnung, wie man es zu meinem Hintergrundbild macht. Ich musste alle öffnenden und schließenden Symbole durch das PLUS (+) Symbol ersetzen. Mein aktueller Code ist wie folgt:

<div style="text-align: center;"> 
<img src="amazing.jpg" style="max-width: 100%; height: auto;" alt="Epoxy Flooring of NY" /> 
</div> 

Irgendwelche Vorschläge zu machen, den Hintergrund statt nur ein Bild des ganzen Bildschirm aufzunehmen? Ich brauche die Worte darüber, nicht darunter.

Answer 1

Willkommen in der Stackoverflow-Community :)

Verwenden Sie einfach die background-image -property anstelle eines <img> -tag.

<div style="background-image:url('amazing.jpg')"> 
    <!-- your text here --> 
</div> 

Weitere Informationen See hereand here.

Hinweis:

Wenn Sie background-image statt <img> verwenden, werden Sie nichts sehen, wenn Sie die <div> eine Höhe geben, indem sie entweder mit Text füllen oder/und es ist height von zum Beispiel voran, 100px .

Answer 2

Es gibt zwei Möglichkeiten, eine davon mit der Eigenschaft css background img und die andere mit dem HTML img-Tag zu erstellen.

https://jsfiddle.net/pdhgLap8/

Im Grunde, was Sie Hintergrundbilder zu verwenden hinzufügen müssen, ist

background-image: url("https://i.imgur.com/SebQr4d.jpg"); 
    background-size: contain; 
    background-repeat: no-repeat; 

Dieses Hintergrundbild gesetzt wird es machen, so dass es nur so groß wie die div ist es in ist und macht es, damit es nicht die div