Depot43-Unterlagen - Background Image

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Background Image</title>
	<style>
		* {
			margin:0;
			padding:0;
			box-sizing: border-box;
		}
		body {
			font-family: sans-serif;
		}
		h1 {
			text-align:center;
			margin: 24px 0;
		}
		div.bilderrahmen {
			width:100%;
			height:394px;
			background-image: url(https://depot43.ch/unterlagen/assets/microcss/fiascerino-markierung.jpg);
			background-size: cover;
			background-position:center;
			position: absolute;
			top:0;
			z-index: -1;
		}
		div.textrahmen {
			background-color: rgba(255,255,255,0.6);
			max-width:800px;
			border:1px solid #ccc;
			margin: 24px 20%;
			padding:12px;
		}
		div.textrahmen p {
			margin: 0 12px;
		}
	</style>
</head>
<body>
  <div class="bilderrahmen"></div>
   
   <div class="textrahmen">
      <h1>Hinter­grundbilder - Position - fixed</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aliquid ut quaerat illum, et accusantium sit atque aliquam iusto rerum quibusdam nam necessitatibus nisi eaque quidem ratione sint voluptatem dolorum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aliquid ut quaerat illum, et accusantium sit atque aliquam iusto rerum quibusdam nam necessitatibus nisi eaque quidem ratione sint voluptatem dolorum.</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aliquid ut quaerat illum, et accusantium sit atque aliquam iusto rerum quibusdam nam necessitatibus nisi eaque quidem ratione sint voluptatem dolorum.</p>
   </div>
</body>
</html>


 

            

Kommentar

Das Bild wird mit CSS in den Hintergrund geladen. Für das Bild wird ein DIV-Element erstellt, dass sich über die gesamte Breite und Höhe erstreckt.

Der Hintergrund wird fixiert, so dass er nicht mit dem Scrollbereich des BODY-Elements reagiert.

Das Bild wird im Rahmen mit "background-size: cover;" immer auf die maxiamele Breite oder maximale Höhe skaliert, mit "background-position:center;" zentriert. Der Hintergrund wird zuunterst angeordnet mit "z-index: -1;".

Der darüber liegende Textrahmen kann nun ganz normal benutzt werden. Wenn sein Inhalt keinen Platz mehr im Browserfenster hat, wird ein Scrollbalken aufgebaut. Das Hintergrundbild wird durch das Scrollen nicht beinflusst.