Bildpositionierung im CSS & HTML

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:

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