Mitschrift 06.05.2014
TAG 20Wiederholung Positioning und Besprechung der Klausurinhalte
Bilder als Hintergrundgrafik mit CSS einbinden
=> Kachelung: der zur Verfügung stehende Raum wird aufgefüllt!
- Einen div-Containerim body erstellen
- div-Style-Angaben:
- div {background-image: url (milka.jpg)}
- -> dann positioniert er die Bilder nebeneinander, um den Container zu füllen, allerdings verändert er die Größe nicht und so kann es vorkommen, dass das Bild nicht in der vollen Höhe dargestellt wird, sondern der untere Teil des Bildes einfach abgeschnitten wird, weil die Höhe des div-Containers kleiner ist, als die Höhe des Bildes
- background-image: füllt den gesamten Bereich des Elementes (hier div-Container)
- der div-container ist so groß, wie die maximale Ausdehnung des Paragraphes
- Quellcode:
<!doctype html>
<html>
<head>
<title>Bilder</title>
<style type="text/css">
div {
background-image: url(milka.jpg);
}
</style>
</head>
<body>
<div style="width: 100%; border: 1px solid red;">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</body>
</html> - Ein Hintergrundbild kachelt sich standardmäßig über die x- und y-Achse
- das Bild dehnt sich nur soweit aus, wie die maximale Höhe des Containers/Elementes bestimmt ist
 | |
|
div {
background-image: url(milka.jpg);
background-repeat: no-repeat;
}
-> so kachelt es sich nicht mehr - der Befehl hindert die Kachelung
=> als nächstes insgesamt 4 p-Tags einfügen, um den Paragraph größer zu machen
 |
| Bilder einfügen über CSS: no-repeat |
<html>
<head>
<title>Bilder</title>
<meta name="author" content="msewelies">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
div {
background-image: url(milka.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div style="width: 100%; border: 1px solid red;">
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</body>
</html>
=> repeat-x - horizontale Kachelung
ist die horizontale und somit standardmäßige Einstellung: horizontale Kachelung
|
| Bilder einfügen über CSS: horizontale Ausrichtung/ Kachelung (default) |
=> repeat-y - vertikale Kachelung
(hier werden die Bilder nicht nebeneinander sondern übereinander gekachelt-
 |
| Bilder einfügen über CSS: vertikale Ausrichtung/ Kachelung |
Besser png-Bilder nehmen - gif. sind old-stuff!
<!doctype html>
<html>
<head>
<title>Bilder</title>
<style type="text/css">
div {
background-image: url(kachel112.gif);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<div style="width: 100%; border: 1px solid red;">
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</body>
</html>
=> Nehme ich die Background-repeat raus, habe ich die default-Einstellung (horizontale & vertikale Kachelung -= Ausfüllung des kompletten Elements durch nebeneinander und übereinanderreihung des Bildes)
Nach der Pause zu Css4you - Eigenschaften - Hintergrundbilder
Der Hintergrund eines Elements kann als Farbe oder als Bild festgelegt werden. Nach dem Boxmodell erstreckt sich der Hintergrund über den Inhalt und dem padding-Bereich (Abstand zwischen Inhalt und Rahmen).
Hintergründe werden nicht vererbt. Da aber transparent der voreingestellte Wert für Hintergründe ist, scheint der Hintergrund der übergeordneten Box durch
Eigenschaft Beschreibung Werte background Hintergrund Werte für: background-color, background-image, background-attachment, background-repeat, background-position, Inherit background-attachment Hintergrund fixieren fixed, scroll, Inherit background-image Hintergrundbild url(), none, Inherit background-position Hintergrundbild positionieren left, right, center, top, bottom, center, Kombinationen: Längenangabe Längenangabe Prozentangabe Längenangabe Längenangabe Prozentangabe
Schlüsselwort Schlüsselwort, Inheritbackground-repeat Hintergrund wiederholen no-repeat, repeat, repeat-x, repeat-y, Inherit
background-image
background-repeat
=> background-position
wir haben die Möglichkeit 2 Werte anzugeben!
-> wenn ich nur einen Wert angebe, wird der zweite Wert automatisch zentriert!!!
background-position:50% 50%;
- der erste Wert isr für die horizontale
- der zweiter Wert ist für die vertikale Ausrichtung zuständig
- left/top/bottom/center
- Längenangaben in px ,
- Prozentangaben
<!doctype html>
<html>
<head>
<title>Bilder</title>
<style type="text/css">
div {
background-image: url(kachel12.gif);
background-position:50% 50%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div style="width: 300px; height: 300px; border: 1px solid red;">
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</body>
</html>
=> background-attachement
(wird im operativen Bereich nicht mehr eingesetzt.background-attachment: fixed; /* Bild scrollt nicht mehr mit */
Hintergrundbilder fixieren:
<html>
<head>
<title>Background-Attachment</title>
<meta name="author" content="Michael Sewelies">
<style type="text/css">
body {
background-image: url(gras-texturen.png);
background-repeat: repeat-x;
background-attachment: fixed; /* Bild scrollt nicht mehr mit */
padding: 4em;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
</p>
</body>
</html>
Einziger Nachteil: Es ist ein Hintergrundbild! Es ist uns bleib im Hintergrund, alles andere liegt dadrüber -> z-index greift hier nicht! Es ist und bleibt die unterste Ebene!!!
wir können horizontal und vertikal verschieben über unsere 2 Werte:
Übung:
Zunächst Tag13 Sonne und Seitenleiste, Fullscreen Background (plus Leinwand) von Herrn Sewelies sichten!
Bauen Sie etwas ähnliches in Eigenkreation nach:
Keine Kommentare:
Kommentar veröffentlichen