Haupt-Reiter

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)
}

Bewertung: 
0
Bisher keine Bewertung

Kommentare

Bild von Martin Sedlmeier


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 klatschen, eine wunderschöne Layer-Werbung zum Beispiel. Wenn man da jetzt einfach absolut hinschreibt, dann klebts 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!!!)

 




Bezüglich Hintergrundgrafiken

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)

}

Bild von Martin Sedlmeier

Wenn man z.B. eine kleien Lupe über ein Galeriethumbnail legen will, dann kann man sie darunter  floaten lassen und dann mit einer negativen margin drüberschieben.


img#Lupe{
float:left;
display:inline;
margin-top:-16px;
border:0px;
}

body{background-image: url(grafi k.gif);     = Hintergrundbild liegt im selben Ordner wie CSS-Datei.background-position: right bottom;     = position des Hintergrundbildes.background-repeat: no-repeat oder repeat;    = (keine) Wiederholung des Hintergrundesbackground-size: cover;     = Anzeigegröße des Hintergrundbildes.} background-size:cover = Fläckendeckendes Bild, füllt ganzen Bildschirm aus, Bild wird hierbei "abgeschnitten", wenn Größe nicht passt.auto = Skaliert originalformat auf gesamte Breite des Bildschirmscontain = Bild wird auf Inhalts"größe" des Webseitencontents skaliert.

  • body{
  • background-image: url(grafi k.gif);     = Hintergrundbild liegt im selben Ordner wie CSS-Datei
  • background-position: right bottom;     = position des Hintergrundbildes.
  • background-repeat: no-repeat oder repeat;    = (keine) Wiederholung des Hintergrundes
  • background-size: cover;     = Anzeigegröße des Hintergrundbildes.
  • background-size:
  • cover = Fläckendeckendes Bild, füllt ganzen Bildschirm aus, Bild wird hierbei "abgeschnitten", wenn Größe nicht passt.
  • auto = Skaliert originalformat auf gesamte Breite des Bildschirms
  • contain = Bild wird auf Inhalts"größe" des Webseitencontents skaliert.

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