Bildpositionierung im CSS
Damit ist entweder die allgemeine Positionierung von Elementen mit CSS gemeint oder die Hintergrundbildpositionierungen mit CSS.
Positionierung von Elementen mit CSS
de.selfhtml.org/css/eigenschaften/positionierung.htm
Hier einige kurze Beispiele dafür:
1. Beweglich (Thumbnails, etc.)
img#Galeriebild{
float:left;
display:inline;
margin:11px;
border:0px;
}
2. Fest ( z.B. Buttons über irgendwas drüber )
img#Logo{
position:absolute;
left:33px;
top:55px;
border:0px;
}
3) Fest, nicht wegscrollen ( erst ab IE7 )
img#Logo{
position:fixed;
left:33px;
top:55px;
border:0px;
}
Wenn man was absolut positionieren will, dann muss die Box drumherum ebenfalls absolut oder - falls diese beweglich sein soll - relativ positionieren.
Beispiel: Man will etwas irgendwo über den Seiteninhalt positionieren, eine wunderschöne Layer-Werbung zum Beispiel. Wenn man da jetzt einfach absolut hinschreibt, dann klebt es am body fest. Wenn man aber den Seiten-div der mit "margin: 0px auto;" zentriert ist relativ setzt, dann orientiert sich das Element an der Seite.
Was im Code weiter unten steht, wird immer obendrübergeschoben (NICHT über Flash!!!)
Hintergrundbildpositionierungen mit CSS
de.selfhtml.org//css/eigenschaften/hintergrund.htm#background_image
Beispiel:
body{
background-image:url(../bilder/body-Hintergrund.jpg);
background-repeat: no-repeat; //(repeat-x, repeat-y, repeat)
background-position: left top;
//oder
background-position: center top;
//oder
background-position: 10px 30px; //(10 von links, 30 von oben)
}
Kommentare
Hallo,
danke für deine Ergänzung. Bitte gerne oben ins Wiki direkt integrieren. Einfach auf bearbeiten klciken und dann kannst du das Wiki bearbeiten. Danke.
Grüße
Peter