Antwort
.background-image {
background-image: url('pfad/zum/bild.jpg');
background-size: cover;
background-position: center;
}
<div class="background-image"></div>
oder als SVG
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
Als DATA URL
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Beispielbild">
Als Canvas
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
context.drawImage(img, 0, 0);
};
img.src = 'pfad/zum/bild.jpg';
</script>
via JavaScript
<div id="imageContainer"></div>
<script>
var img = document.createElement('img');
img.src = 'pfad/zum/bild.jpg';
document.getElementById('imageContainer').appendChild(img);
</script>
Als Pseudo Element in CSS
.image::before {
content: url('pfad/zum/bild.jpg');
}
oder eben direkt als html
<body background="pfad/zum/bild.jpg">
<object data="pfad/zum/bild.jpg" type="image/jpeg">
Alternativtext für Browser, die das Bild nicht anzeigen können.
</object>
<embed src="pfad/zum/bild.jpg" type="image/jpeg">
<figure>
<img src="pfad/zum/bild.jpg" alt="Beschreibung des Bildes">
<figcaption>Bildunterschrift für das Bild</figcaption>
</figure>
<a href="pfad/zum/großen-bild.jpg">
<img src="pfad/zum/thumbnail.jpg" alt="Thumbnail Bild">
</a>