Beispiel:Background-attachment.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <title>background-attachment</title> <style> .fixed { background-attachment: fixed; } .scroll { background-attachment: scroll; } .local { background-attachment: local; }

div { 

   overflow: auto;
   width: 167px;
   height: 300px;
   background-image: url("/mediawiki/images/6/61/Sonnenuntergang.jpg");
   background-repeat: no-repeat;

border: thin solid; 

   font-size: 2em;
   font-weight: normal;

} figure{ 

   display:inline-block;}


</style> </head> <body>

Fixierung des Hintergrundbildes mit background-attachment

    <figure>

Ganz viel Lorem Ipsum. Was tut man nicht alles, um Scrollbalken zu erhalten. Ganz viel Lorem Ipsum. Was tut man nicht alles, um Scrollbalken zu erhalten. 

       <figcaption>fixed</figcaption>
   </figure>
   <figure>

Ganz viel Lorem Ipsum. Was tut man nicht alles, um Scrollbalken zu erhalten. Ganz viel Lorem Ipsum. Was tut man nicht alles, um Scrollbalken zu erhalten. 

       <figcaption>scroll</figcaption>
   </figure>
   <figure >

Ganz viel Lorem Ipsum. Was tut man nicht alles, um Scrollbalken zu erhalten. Ganz viel Lorem Ipsum. Was tut man nicht alles, um Scrollbalken zu erhalten. 

       <figcaption>local</figcaption>
   </figure>

In der linken Spalte sehen Sie nur dann ein Hintergrundbild, wenn Sie keinen zu großen Außenabstand nach links haben.

</body> </html>

Abgerufen am 27.07.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Background-attachment.html"