|
|||
Hintergrundbild positionieren
Hallo,
ich möchte auf einer Seite ein Hintergrundbild anzeigen, dass immer auf 100% Bildschirmgröße vergrößert wird. Es soll rechtsbündig auf der Seite dargestellt werden. Mein Content Bereich soll immer zentriert am oberen Rand der Seite dargestellt werden. Er soll über dem Hintergrundbild liegen. Im Moment verwende ich folgenden Ansatz: HTML-Code:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> <!-- HTML, BODY { margin: 0; padding: 0; position: relative; } BODY { cursor: default; font-family: "Helvetica Neue","Arial",sans-serif; color: #666666; font-size:10pt; background-color: #FFF; } h1 { color:#CCCCCC; font-size:14pt; font-weight:normal; margin-top: 0px; } #hintergrund { position:absolute; z-index:1; float:left; height:100%; } .c1-wrapper { min-width:980px; position:relative; width:980px; background-color:#FFF; z-index:5; clear:both; margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto; } .c2-wrapper { margin: 10px; float: left; position: relative; width: 960px; padding-top: 5px; padding-left: 5px; padding-right: 5px; padding-bottom: 5px; background-color: #FFF; } --> </style> </head> <body> <div><img id="hintergrund" src="images/hg.jpg" alt="" title=""/></div> <div class="c1-wrapper"> <div class="c2-wrapper"> text </div> </div> </body> </html> Danke im Voraus für die Hilfe. |
Sponsored Links |
|
|||
Danke zunächst.
Das Bild wird nun angezeigt. Allerdings zu gross. man muss nun auf der Seite herunter scrollen. Das Hintergrundbild soll immer 100% der Höhe des dargestellten Bereiches im Browser betragen. Die Breite soll eigentlich nur proportional angepasst werden. Es soll rechtsbündig am rechten Rand des Browsers zu dargestellt werden. |
|
|||
Für eine Anpassung an die Höhe kann man so schreiben:
Code:
HTML, BODY { margin: 0; padding: 0; position: relative; height:100% } BODY { cursor: default; font-family: "Helvetica Neue","Arial",sans-serif; color: #666666; font-size:10pt; background-color: #FFF; } #hintergrund { position:absolute; z-index:1; float:left; width:auto%; height:100% } ...usw. etc. Jetzt hab ich doch eine Idee! Das div, in dem das Bild liegt, muss direction:rtl sein. D.h. Schreibrichtung von rechts nach links. Also z.B. so schreiben: Code:
... <div style="direction:rtl"><img id="hintergrund" src="images/hg.jpg" alt="" title=""/></div> ... usw. etc. Geändert von Stadtmensch (12.06.2013 um 20:56 Uhr) Grund: Noch was hinzufügt. |
|
||||
Der Fairniss halber Hintergrundbild / Content positionieren - PHP Forum: phpforum.de
|
|
|||
Die einfachste Lösung wär wohl CSS3:
Code:
body { background-image: url('bg.jpg'); background-size: contain; background-position: right; } Mehr dazu: Background-size - CSS3 . Info |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hintergrundbild, Content richtig positionieren | Foma | CSS | 6 | 14.08.2012 19:24 |
Text auf zentrierten Hintergrundbild positionieren | zonkifail | CSS | 8 | 26.10.2011 19:01 |
Hintergrundbild ausserhalb positionieren | RaBo | CSS | 1 | 21.07.2011 19:13 |
Hintergrundbild in zentriertem div positionieren und fixieren | anutoshen | CSS | 13 | 25.04.2010 13:37 |
Hintergrundbild in Liste positionieren | seelefant | CSS | 10 | 09.07.2008 19:51 |