it-swarm.com.de

Wie kann man das Hintergrundbild so gestalten, dass es in die gesamte Seite passt, ohne dabei einfach css zu verwenden?

Ich habe ein JPG-Bild mit einer Größe von 1024 x 724. Meine Seitengröße ist nicht festgelegt . Meine Anforderung ist: Wenn ich die Seite verkleinere, sollte das Hintergrundbild auch die Größe ändern und zur Seite passen.

Ich möchte auch nicht die bildbezogenen Informationen in meiner HTML-Seite/JSP aufbewahren. Ich möchte dies mit reinem CSS tun. Ich benutze kein CSS3. Denn es gibt ein Attribut namens background-size, mit dem das Bild auf Seitenbreite und -höhe gedehnt werden kann. Derzeit unterstützt dies nur Google Chrome. Irgendeine Hilfe ? 

19
User 1034

Sie können die Größe der Hintergrundbilder mit CSS2 nicht ändern.

Sie können einen Container haben, dessen Größe angepasst wird:

<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
  <img src='whatever.jpg' style='width:100%;height:100%' alt='[]' />
</div>

Auf diese Weise wird div hinter der Seite platziert und nimmt den gesamten Platz ein, während die Größe nach Bedarf geändert wird. Das img wird automatisch an die div angepasst.

24
Ben

versuche etwas wie

background: url(bgimage.jpg) no-repeat;
background-size: 100%;
16
heximal

Sie können entweder JavaScript oder CSS3 verwenden.

JavaScript-Lösung: Verwenden Sie ein absolut positioniertes <img>-Tag, und ändern Sie dessen Größe beim Laden der Seite und bei jeder Größenänderung der Seite. Achten Sie auf mögliche Fehler, wenn Sie versuchen, die Seiten-/Fenstergröße zu ermitteln.

CSS3-Lösung: Verwenden Sie die Eigenschaft CSS3 background-size . Sie können entweder 100% 100% oder contain oder cover verwenden, je nachdem, wie das Bild verkleinert werden soll. Das funktioniert natürlich nur bei modernen Browsern.

4

Je nachdem, welche Art von Bild Sie haben, ist es möglicherweise besser, das Design so zu überarbeiten, dass das Hauptbild zu einer festen Farbe oder einem wiederholbaren Muster ausgeblendet wird. Wenn Sie das Bild auf der Seite zentrieren und die Farbe als Hintergrund verwenden. 

Unter http://www.webdesignerwall.com/trends/80-large-background-websites/ finden Sie Beispiele für Websites mit großen oder skalierbaren Hintergründen. 

3
james

hintergrund: URL (bgimage.jpg) keine Wiederholung; Hintergrundgröße: Abdeckung;

Das hat den Trick gemacht

0
degee

Diese drei Linien funktionierten alle für mich.

background-image: url("pages/images/backImage.png");
background-size: 100%;
background-repeat: no-repeat;
0
Ammad