SVG Image Background

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>SVG-Animation - SVG Image Background</title>
    <style>
	div.backgroundbox {
		max-width: 400px;
		min-height: 600px;
		background: url(http://depot43.ch/unterlagen/assets/svg/fallback/affe.svg);
		background-size:100% 100%;
		background-repeat:no-repeat;
	}
	div.backgroundbox p {
	    	font-size:4em;
	}
    </style>
</head>
    <body>
	<div class="backgroundbox">
		<p>Das SVG-Bild wird mit CSS als Hintergrund geladen.</p>
	</div>
    </body>
</html>


 

            

Hinweis

Eine SVG-Datei kann in ein beliebiges HTML-Element als Hintergrundbild geladen werden. Dazu ist es erforderlich, die Grösse des Hintergrundbildes anzugeben (Bsp):

background-size:200px 280px;

Um Responsiv-Eigenschaften nutzen zu können, ist es erforderlich, dem umgebenden Element eine Maximalgrösse und dem Hintergrundbild eine Ausdehnung von 100% zuzuweisen. Zudem soll das Hintergrundbild nicht repetiert werden.

max-width: 400px;
 min-height: 600px;
 background: url(http://depot43.ch/unterlagen/assets/svg/fallback/affe.svg);
 background-size:100% 100%;
 background-repeat:no-repeat;

DB-Table: svg-image-background