Hallo liebe Community
Erst mal möchte ich mich beim Ersteller dieser Hilfeseiten bedanken.....es wird wohl demnächst eine Bestellung geben für die gesamten Video's
Allerdings wollte ich mal die Experten fragen ob folgendes rein mit html und css möglich ist und falls ja, in welchen Browsern das dann unterstützt werden würde.
Ich möchte in einem DIV ein Bild hinterlegen, welches sich, egal wie hoch oder breit die Seite ist, immer zu hundert Prozent an die gesamte Seite anpasst. Selbst wenn durch die Skalierung das Bild etwas unschön werden sollte, es soll sich nun mal so verhalten.
Ich habe mir selbst das folgende zusammengebastelt:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<link href="css/design.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="bg"></div>
</body>
</html>
Alles anzeigen
#bg {
background-image: url(../img/bg/bg.jpg);
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
Vorweg....auch wenn in dem Tutorial immer gesagt wird, dass die css Datei neben die index.html gehört, so bin ich doch der Meinung dass man vorweg eine saubere Ordnerstruktur einhällt, sprich die Dateien in jeweilige Ordner verfrachten.
Desshalb sieht für dieses Testobjekt meine Ordnerstruktur wie folgt aus:
Hauptordner
-index.html
-css
__ '-->design.css
-img
__ '--->bg
_______'-->bg.jpg
-js
ich hoffe man kann das so erkennen
Aber jeder, wie er es haben möchte.....nun denn...auf jeden Fall verhällt sich das ganze nicht so wie ich es mir vorgestellt hatte.
Das Bild passt sich zwar wohl in der Breite zu 100% an, das Seitenverhältnis des Bildes bleib jedoch immer bestehen....macht man das Fenster zum Beispiel höher als breiter, sieht man dass das Bild sich nicht zu hundert Prozent an die Höhe anpasst.
Gibt es irgendwie eine Möglichkeit das so zu bewerkstelligen?
Ach ja...ich hatte noch vergessen zu erwähnen dass der DIV aus dem normalen Textfluss heraus sein muss. Als Testbild könnt ihr irgendeines nehmen....meines hatte 1024 x 768 Pixel...
Danke
Gruss
Christian