Steuerung des Hintergrundbildes über Positionsangaben
Nur mit Hilfe eines einzigen Hintergrundbildes hat man die Möglichkeit ein Bild für den Betrachter immer anders erscheinen zu lassen.
Der große Vorteil von dieser Technik, dass man nur ein Bild erstellen, hinterlegen und daher auch nur 1 Bild geladen werden muss. Man spart sich Zeit für die Erstellung und außerdem auch Ladezeit.
Definition in css
div.backgroundposition.left {
background:url(background-position.jpg) left top no-repeat;
width:115px;
height:62px;
}
div.backgroundposition.center {
background:url(background-position.jpg) center center no-repeat;
width:115px;
height:62px;
}
div.backgroundposition.right {
background:url(background-position.jpg) right bottom no-repeat;
width:115px;
height:62px;
}
background:url(background-position.jpg) left top no-repeat;
width:115px;
height:62px;
}
div.backgroundposition.center {
background:url(background-position.jpg) center center no-repeat;
width:115px;
height:62px;
}
div.backgroundposition.right {
background:url(background-position.jpg) right bottom no-repeat;
width:115px;
height:62px;
}
Und so schaut´s aus
Grafikgrundlage:
Positionierung der Grafikgrundlage links & oben:
Positionierung der Grafikgrundlage mitte & mitte:
Positionierung der Grafikgrundlage rechts & unten:
Positionierung der Grafikgrundlage mitte & mitte:
Positionierung der Grafikgrundlage rechts & unten:
Verschaff Dir einen Überblick
Wissenswertes, Hilfestellung und Lösungen rund um das Thema CSS:A
Absolute und relative MaßeAbgerundete Ecken
Anordnung
B
background-attachmentbackground-position
C
cm (Zentimeter)Color
Contextual Selectors
CSS Formatierungen
CSS-Sprites
D
Definition mehrerer TagsE
Ebenen / LayerEcke / Eckenrundung
Einbindung CSS
em
ex
Externe CSS-Datei
F
FarbenFarbcodes
Farbnamen
Farbverlauf
Fixierter, fester Hintergrund
G
GradientGrundlagen
H
HintergrundbildHintergrundbild Positionierung
Hover-Effekt über Hintergrundbild
I
IDsin (Inch)
Interne CSS-Datei
K
KlassenKlassifizierung
L
Layer / EbenenListen
P
pcPosition
Positionierung Hintergrundbild
pt (Pica)
px (Pixel)
R
Rahmen FormatierungReihenfolge von Elementen
Relative und absolute Maße
repeat Möglichkeiten
Runde Ecken
S
SchriftformatierungScrollbarer Hintergrund
Sichtbarkeit
Sprites
Stylesheet
T
TextflussTextgestaltung
U
Überhängende InhalteÜbereinander liegende Elemente
V
VererbungVerlauf / Verläufe
