Suche HTML Code für zentrierten Hintergrund
Ich habe ein Hintergrundbild auf meiner Webseite einfügt.So weit alles gut.Bei mir auf dem Monitor schaut alles super aus.Ich benutze eine Auflösung von 1680x1050.Aber wenn ich die Auflösung runter mache oder bei meiner Freundin auf meine Webseite gehe die eine niedrigere Auflösung hat dann ist alles verschoben.Bei mir ist alles auf 1680x1050 angepasst.Ich wollte wissen ob es einen Code gibt bei dem sich mein Hintergrundbild Automatisch anpasst.
3 Antworten
html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; } #hintergrund { position:absolute; width:100%; height:100%; z-index:1; } #scrollbereich { position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; z-index:2; } #inhalt { padding:20px 20px 20px 20px; z-index:3; } td { font-size:15px; color:#FFFFDF; font-family:Georgia; text-align: justify; } </style> </head> <body> <div> <img id="hintergrund" src="DEIN LINK" > </div> <div id="scrollbereich"> <div id="inhalt">
Wenn du willst, dass das Layout deiner Webseite in jeder beliebigen Monitorauflösung gut aussieht, dann musst du ein sogenanntes elastisches Layout erstellen, bei dem die Größe aller Elemente an der Standardschriftgröße ausgerichtet ist (mit der Einheit em).
Wenn du möchtest, dass der Body deiner Webseite mittig ausgerichtet ist, musst du im CSS die seitlichen Margins auf auto stellen.
body {
margin: 0 auto;
}
Da nicht jeder Internetnutzer einen Monitor mit großer Auflösung hat, solltest du dich an der Auflösung orientieren, die von den meisten Usern benutzt wird, und das ist momentan 1024 x 768 px. Der Viewport ist kleiner und man sollte ja auch noch Platz für die Scrollbalken einplanen und deshalb sollte man nur eine maximale Breite von 960 px nehmen.
body { background-image: url('deinBild.jpg'); background-repeat: no-repeat; background-position: center;}
Das ganze in den <head> packen und mit <style type="text/css">body....</style> umschließen
Geht nicht.Es passt sich trotzdem nicht der Auflösung an und verschiebt sich.Aber danke für die Antwort
der auflösung anpassen wird sich das bild nie - das ist nur der befehl um das bild zu zentrieren, sprich wenn du größere auflösungen hast, wird das bild mittig dargestellt werden.
Kannst aber per Javascript das Bild zumindest kleiner machen, wenn die Auflösung kleiner ist. Schau mal hier: http://vikhyat.net/code/resize_large_images_js/
Damit kriegt man sowas hin, ganz so toll sieht es dann nicht mehr aus, aber vielleicht ist es ja das was Du suchst.
Super!Funktioniert :) Vielen vielen vielen Dank