CSS/Tutorials/Hintergrund

Dieser Kurs zeigt, wie man den Hintergrund von Webseiten mit Hintergrundfarben, – grafiken und -mustern gestalten kann.

Dies soll jedoch immer responsiv und so schlank wie möglich geschehen, um schlanke und damit schnelle Webseiten zu erreichen.

• Hintergründe
  Gestaltung mit CSS
  • Hintergrundfarben
  • Hintergrundgrafiken
  • multiple backgrounds
   
• Hero-Images
  • img, picture und srcset
  • Parallax Scrolling

  
   
• 

  Verläufe mit CSS

  browsereigene Bilder zur Hintergrundgestaltung

  • konische Verläufe
  • lineare Verläufe
  • radiale Verläufe
   

Siehe auch

• 

  Tricks mit
  border-image

  viel mehr als Rahmen!

   
• 

  CSS Sprites
  • background-position
   
• Image Replacement
   

Wichtig für die Gestaltung von Hintergrundfarben und -bildern sind folgende Eigenschaften:

• background als zusammenfassende Eigenschaft von
  • background-image
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-origin
  • background-position
  • background-repeat
  • background-size

• border-image als zusammenfassende Eigenschaft von
  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

sowie die Funktionen

• image-set()
• conic-gradient()
• linear-gradient()
• radial-gradient()
• repeating-conic-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()