Haupt-Reiter

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:

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

 

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