diedVIPs

html knowhow

Hintergrund













Hintergrund
background Hintergrund (allgemein)
Die Eigenschaft background ist die zusammenfassende Eigenschaft von background-color, background-image, background-repeat, background-attachment und background-position.
  • background-color
  • background-image
  • background-position
  • background-size
  • inherit
#background {background-image: url("Bilder/plakat2.jpg"); width: 100%; background-color:#D2FFEA; height: auto; background-size: 100%; background-attachment: fixed; background-repeat: no-repeat; text-align:center;}

background-color Hintergrundfarbe
  • <color>
  • transparent
  • inherit
div {background: rgba(0, 128, 0, 0.3)
/* Green background with 30% opacity */
}

p {background-color: yellow;}
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
background-image
Farbverläufe
Mit Gradiaturen können Sie sanfte Übergänge zwischen zwei oder mehr angegebenen Farben anzeigen.

Es gibt zwei Arten von Farbverläufen:

Lineare Farbverläufe (nach unten/oben/links/rechts/diagonal)
Radiale Farbverläufe (definiert durch ihre Mitte)
  #grad {background-image: linear-gradient(to bottom right, red, yellow);}
#grad {background-image: linear-gradient(to right, red , yellow);}
#grad {
background-image: radial-gradient(red, yellow, green);
}




background-image
Hintergrundgrafik
Hintergrundgrafik
  • <uri>
  • none
  • inherit
body {background-image: url("paper.gif");}
#example1 {background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat;}
#example1 {background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;}

background-attachment Die background-attachment-Eigenschaft gibt an, ob das Hintergrundbild gescrollt oder fixiert werden soll scroll
fixed
body {background-image: url("tree.png"); background-attachment: fixed;}
background-position Position der Hintergrundgrafik
  • <percentage>
  • <length>
  • left
  • center
  • right
  • top
  • bottom
  • inherit
body {
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
background-size Größe des Hintergrundbildes
  • <length>
  • <percentage>
  • auto
  • cover
  • contain
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}

#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
}








Kontakt    Datenschutz   Impressum