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)
}
ALLGEMEINE POSITIONIERUNG IM CSS
- 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.
In HTML einbinden (index.htm)
index = startseite
- Verknüpfung durch <img> Tag
- width, height = Breite und Höhe, Maße des Bildes, können in px "100" oder in Prozent "30%" angegeben werden
- alt = “...“ Beschreibung des Bildes, zur Orientierung für Blinde. Suchmaschinen erkennen so
- den Bildinhalt. Berschreibung wird angezeigt, wenn Bild nicht darstellbar ist.
- src = “button.png“ Dateiname und Verlinkung des Bildes
- href="link" Verlinkt das Bild mit einer Webseite
<img src=“button.png“ width=“200“ height=“200“ alt=“Knopf mit Text“ href=“www.webseite.de“ >= Bild liegt im selben Ordner wie der HTML-Code <img src=“Bilder/button.png“ width=“20%“ height=“30%“ alt=“Knopf mit Text“ href=“www.webseite.de“ >= Bild liegt im Unterordner „Bilder“ !ACHTUNG!alt ist sehr wichtig beim Einfügen eines Bildes. Gründen siehe oben.
Videos zum Thema
Grundlagen für den Gebrauch von Bilder auf einer der Webseite in HTML mit dem IMG Element. Wichtige Attribute bei Bildern sind sicherlich CLASS, TITLE und ALT.
https://www.youtube.com/watch?v=_BArhD7NubE
Auch hier grundlegende Informationen wie man Bilder Bilder in HMTL einfügt.
https://www.youtube.com/watch?v=XvKT3FWSLfo
Möchte man Hintergrundbilder im HTML verwenden, dann werden diese über CSS zugewiesen.
https://www.youtube.com/watch?v=u5Chq_GF_8k
Bilder werden mittlerweile nicht mehr nur über IMG eingebunden. Für responsives Webdesign können Bilder an bestimmte Bildschirmanforderungen geknüpft werden. Z.B. Handy im Hochformat hat andere Anforderungen als ein 5K iMac. Dann kommt das PICTURE Element hinzu.
https://www.youtube.com/watch?v=uLLqafzVIlw&list=PLPjKx80JC4CAWBNOp8z_LJqYIekU8MzKi&index=4
Bilder für das Web optimieren ist ein ergänzender Teilbereich. Natürlich sollte man sich Gedanken über Auflösung und Qualität sowie Speicherplatz machen.
https://www.youtube.com/watch?v=udaLENwDyXY
