Designer-Logo
Designer-Logo
Überschrift Hintergrundfarbe
Mit der background-color Eigenschaft wird die Hintergrundfarbe eines Elementes bestimmt.
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
div .outputExample {
background-color: dodgerblue;
}
</style>
</head>
<body>
<div class="outputExample">Dieses div-Element hat als Hintergrundfarbe "dodgerblue"!</div>
</body>
</html>
Überschrift Hintergrund unterschiedlicher Elemente
Die Elemente <h1>, <p>, und <main> haben eine unterschiedliche Hintergrundfarbe:
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: grey;
}
main {
background-color: dodgerblue;
}
p {
background-color: orange;
}
</style>
</head>
<body>
<h1>CSS background-color Beispiel!</h1>
<main>
Dies ist Text innerhalb eines main-Element.
<p>Dieser Absatz hat seine eigene Hintergrundfarbe.</p>
Wir sind noch immer im main-Element.
</main>
</body>
</html>
Überschrift Hintergrundfarbe und die Transparenz/Deckkraft
Die opacity-Eigenschaft bestimmt die Deckkraft / Transparenz eines Elementes. Der Wert von opacity ist zwischen 0 und 1.0 !!! Um so niedriger der Wert um so mehr Transparenz:
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
div.opacity {
background-color: dodgerblue;
}
div.first {
opacity: 0.25;
}
div.second {
opacity: 0.4;
}
div.third {
opacity: 0.6;
}
</style>
</head>
<body>
<div class="first opacity">
<h1>opacity 0.25</h1>
</div>
<div class="second opacity">
<h1>opacity 0.4</h1>
</div>
<div class="third opacity">
<h1>opacity 0.6</h1>
</div>
<div class="opacity">
<h1>opacity 1 (Vorlage)</h1>
</div>
</body>
</html>
Überschrift Hintergrund-Bild
Die background-image Eigenschaft verwendet als Hintergrund ein Bild. Mit background-repeat: repeat wiederholt sich das Bild und füllt den ganzen Hintergrund aus.
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
div .output {
background-image: url("Bilder/Logo12.png");
background-repeat: repeat;
}
p {
color: red;
font-size: 150%;
}
</style>
</head>
<body>
<p>Dieses div-Element hat ein Bild als Hintergrund das sich wiederholt!</p>
</body>
</html>
Überschrift Hintergrundbild Wiederholung in der X- bzw Y-Achse
Man kann das Bild in der X- oder Y-Achse wiederholen!!! Die X-Achse ist die horizontale Achse und die Y-Achse verläuft in der Vertikalen.
(background-repeat: repeat-x;)
(background-repeat: repeat-y;)
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
div .output {
background-image: url("Bilder/Logo12.png");
background-repeat: repeat-x;
}
p {
color: red;
font-size: 150%;
}
</style>
</head>
<body>
<p>Dieses div-Element hat ein Bild als Hintergrund das sich in der X-Achse wiederholt!</p>
</body>
</html>
Überschrift keine Wiederholung des Hintergrund-Bildes
Keine Wiederholung des Bildes wird mit background-repeat: no-repeat; erreicht!!!
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
div .output {
background-image: url("Bilder/Logo12.png");
background-repeat: no-repeat;
}
p {
color: red;
font-size: 150%;
}
</style>
</head>
<body>
<p>Dieses div-Element hat ein Bild als Hintergrund das sich nicht wiederholt!</p>
</body>
</html>
Überschrift Hintergrund-Bild oben rechts positionieren
Mit der background-position Eigenschaft kann die Position des Bild bestimmt werden.
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
div .output {
background-image: url("Bilder/Logo12.png");
background-repeat: no-repeat;
background-position: right top;
}
p {
color: red;
font-size: 150%;
}
</style>
</head>
<body>
<p>Dieses div-Element hat ein Bild als Hintergrund das sich rechts oben positioniert!</p>
</body>
</html>
Überschrift Hintergrund-Bild als Anhang
Mit dem background-attachment: fixed; wird der nur der Seiteninhalt gescrollt(nicht aber das Bild). Mit dem background-attachment: scroll; wird das Bild mit dem Seiteninhalt gescrollt.

Zum Beispiel-Skript:

background-image: url("Bilder/Logo12.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
background-size: 100px 100px;
Designer-Logo