C S S - Cascading Style Sheets
8. sonstiges
8.3 hintergrundbild - background-image | -repeat | -position
Ein hintergrundbild kann für die ganze seite (body-tag) oder für ein HTML-element vereinbart werden. Wenn das bild nicht das ganze element füllt, wird es horizontal und vertikal so lange wiederholt (gekachelt), bis das element gefüllt ist. Diese bildwiederholung kann aber ganz oder teilweise verhindert werden.
background-image: url('dateiname'); | hintergrundbild | |
background-repeat: wieder | bildwiederholung; für wieder sind folgende angaben möglich | |
repeat | das bild wird über den ganzen hintergrund wiederholt (standard) | |
repeat-x | das bild wird über eine hintergrundzeile wiederholt | |
repeat-y | das bild wird über eine hintergrund-spalte wiederholt | |
no-repeat | das bild wird nicht wiederholt, d.h. nur einmal angezeigt | |
background-position: x-pos y-pos | horizontale und vertikale bildposition | |
x-pos | me left right center | masseinheit oder schlüsselwort |
y-pos | me top bottom center | masseinheit oder schlüsselwort |
Das bild wird an die angegebenen background-position gesetzt und abhängig von den weiteren angaben in verschiedene richtungen wiederholt.
beispiele
Die fünf beispiele zeigen jeweils einen div-container mit
einer textzeile und einem hintergrundbild. Bei den beispielen wird hier nur
das style-attribut aus dem div-tag gezeigt.
beispiel 1
Das bild wird über die ganze tabelle gekachelt, zufällig
passen in den container drei zeilen mit dem bild, allerdings wird es in
der letzen spalte abgeschnitten. Die textzeile im container wird von dem
bild überlagert, ist aber noch erkennbar.
style="border: 3px blue solid; width: 260px; height: 60px;
background-image: url('im/n-links.gif')"
textzeile im container
beispiel 2
Auch hier wird das bild über den ganzen container gekachelt, das kacheln
geht aber von der position 30px x 50px aus, dadurch sieht das ergebnis
etwas anders aus.
style="border: 3px blue solid; width: 260px; height: 60px;
background-image: url('im/n-links.gif');
background-position: 30px 50px"
textzeile im container
beispiel 3
Das bild wird nicht gekachelt, sondern nur einmal genau
in das zentrum des containers gesetzt.
style="border: 3px blue solid; width: 260px; height: 60px;
background-image: url('im/n-links.gif');
background-repeat: no-repeat; background-position: center center"
textzeile im container
beispiel 4
Das bild wird an der horizontalen position 80px über
eine spalte gekachelt. Die angabe der vertikalen (zweiten)
position entfällt.
style="border: 3px blue solid; width: 260px; height: 60px;
background-image: url('im/n-links.gif');
background-repeat: repeat-y; background-position: 80px"
textzeile im container
beispiel 5
Das bild wird an der vertikalen position 25px über
eine zeile gekachelt. Die angabe der horizontalen (ersten) position ist
nötig, damit die vertikale position als solche erkannt werden kann und das
kacheln am linken rand des containers beginnt.
style="border: 3px blue solid; width: 260px; height: 60px;
background-image: url('im/n-links.gif');
background-repeat: repeat-x; background-position: 0px 25px"
textzeile im container
H T M L |
c s s |
P H P |
My S Q L |
JAVASCRIPT |
impressum
Für den inhalt der homepage hartard-bernhard.de
ist im sinne des pressegesetzes verantwortlich:
Bernhard Hartard
Gerhart-Hauptmann-Ring 18
81737 München
089 / 670 39 90
familie.hartard@t-online.de
salvatorische erklärung
Die seiten meiner homepage enthalten links
zu anderen seiten im Internet, auf deren gestaltung und inhalt ich
keinen einfluss habe. Ich übernehme keine gewähr für den inhalt der
verlinkten seiten, rechtsverstöße waren für mich zum zeitpunkt der
verlinkung auf diesen seiten nicht erkennbar, eine ständige inhaltliche
kontrolle der verlinkten seiten ist mir weder möglich noch zumutbar.
Aus rechtlichen gründen distanziere ich mich ausdrücklich vom inhalt
der verlinkten seiten und mache mir deren inhalt nicht zu eigen.
Diese erklärung gilt für alle auf meinen seiten angezeigten links.
CLOSE anzeige schließen
start
Damit startet die homepage neu, d.h. der Steinbeisser treibt wieder sein unwesen.
anfang
Hier beginnen die informationen dieser homepage
zur person
Hier findet man informationen zur person des verfassers dieser homepage, wer er ist, woher er kommt, was er gelernt hat und was er im verlauf seines lebens so getrieben hat.
spiele
Hier finden man einige spiele, aber keine wüsten ballerspiele, sondern einige echte knobeleien (hirn-jogging), zwei gesellschaftsspiele (Mensch ärgere Dich nicht, Kniffel) und das spiel aller frechen schüler: schiffe versenken.
galerien
Ein wenig heimatliebe muss erlaubt sein und deshalb findet man hier einige bildergalerien von Speyer und von seinem Dom.
backbuch
Das ist eine sammlung von backrezepten, aus verschiedenen quellen zusammengetragen und fast alle mit mehr oder weniger erfolg ausprobiert. Da findet man in den endlosen weiten des Internet natürlich mehr und besseres.
stammbaum
Das gehört eigentlich in den privaten bereich dieser homepage, denn hier wird der stammbaum des verfassers der homepage gezeigt. Weil aber beim testen der anwendung auch der stammbaum der Wittelsbacher entstanden ist, wurde beides hier veröffentlicht. Vielleicht interessiert es jemand.
exit
Hier kann man Google oder eine beliebige seite im Internet aufrufen oder diese homepage verlassen.
kontakt
Hier kann man dem verfasser und eigentümer der homepage eine email schreiben.
privat
Hier kommt man in den privaten bereich der homepage, besser gesagt, man kommt da nicht hinein, denn dieser bereich ist geschützt und nur dem eigentümer der homepage zugänglich.
doku
Hier sind die programmiertechniken dokumentiert, mit deren hilfe die homepage gebastelt wurde. Genauer gesagt man findet hier kurz gefasste bechreibungen von HTML, CSS, MySQL und Javascript. Das findet man im Internet natürlich viel ausführlicher aber für einen ersten einstieg in die seltsame welt der programmierung sind diese beschreibungen durchaus brauchbar.