HTML Bild Skalierung

Vince · 6. August 2012

Hallo miteinander,

Ich hab ne dämliche Frage^^

Wie bringe ich es hin, ein Hintergrundbild automatisch an die Auflösung des Benutzers anzupassen?
Mein Bild ist einfach immer zu gross.

width:100%
height:100%

Das hat bei mir eigentlich sonst geklappt.
Aber jetzt irgendwie nicht mehr.

Gibts da andere Lösungen?

Gruss
Vince

Longibotti · 6. August 2012

Dann will ich mal meine gute Tat für den Tag tun... Das folgende ist der CSS Code

Code

html
{ 
	background: url(hintergrundbild.png) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

Vince · 6. August 2012

Hi Longibotti,

Ich steht grad völlig aufm Schlauch..

HTML

<html>
<head>
<title>Startseite</title>
<link href="style_index.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="head_login">


</div>
<div id="main">


</div>
</body>
</html>

Alles anzeigen

So jetz die CSS Deklarationen:

Code

#main {
background: url(images/main.png) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Das Bild existiert und wurde auch schon angezeigt.
Komischerweise bleibt die Seite jetzt einfach leer...

Gruss
Vince

Longibotti · 6. August 2012

Joa, wenn der DIV leer ist und in der CSS Deklaration keine Höhen- und Weitenangabe vorhanden ist, dann hast du ein 0x0 pixel großes DIV - logisch, dass dann nichts angezeigt wird

Vince · 6. August 2012

Ich hab folgendes versucht:

width:auto;
height:auto;

Das bild ist da, failt aber rum, bzw der obere Teil wird abgeschnitte.
Dasselbe wenn ich anstatt main gleich body nehme...

Gruss
Vince

Longibotti · 6. August 2012

Probier's doch einfach mal mit html - wie in meinem Beispiel. Das ist dann eine Skalierung, die sich an die Fenstergröße anpasst. Bei einem Background width und height 100% zu nehmen führt zu Verzerrungen. Mit

Code

html
{ 
	background: url(hintergrundbild.png) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

wird proportional vergrößert beziehungsweise verkleinert. Bei mir klappt das so einwandfrei - Browserunabhängig (wobei ich Chrome benutze ^^)

» † ѕαιтєк | тιмσ † « · 6. August 2012

Setze den <body> in CSS in eine Deklaration.
Dieser Befehl, den du CSS gibst verändert die Größe des sichtbaren Bereiches (Body - Körper der Datei).
An diesen Bereich brauchst du das Bild nur mehr anzupassen und das Bild ist jenachdem wie der User seine
Bildschirmeinstellungen hat, ausgerichtet. Sry fürs umständliche Erklären!

Mit freundlichen Grüßen
Saitek | Timo

Vince · 6. August 2012

Hab auch Chrome und es failt

Der ganze obere Teil wird abgeschnitten..

@Saitek:

lol das geht ja echt so einfach^^
Danke euch beiden für die Hilfe

Gruss
Vince

breadfish.de 11. März 2022