Wie kann ich ein Foto in einer CSS oben links in die Ecke machen?
Moin, ich möchte ein Bild in meiner CSS oben links in die Ecke machen, damit das auf jeder Seite so ist.
Der Code für meine HTML:
<!doctype html>
<html>
<head>
<title>Informatik</title>
<link href="Kurz.css" rel="stylesheet" type="text/css">
</head>
<body>
<footer></footer>
<script language="javascript" type="text/javascript" src="Footer.js"></script>
</body>
</html>
Der Code für CSS:
html {
height: 100%;
}
body {
background-image: url("Bilder/getraenkeguenther.jpg");
background-repeat: no-repeat;
background-position: left top;
min-height: 100%;
margin: auto;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
height: 200px;
text-align: center;
background-color: deepskyblue;
}
Der Code der JS:
var footer = `
<a>Impressum</a>
`;
document.getElementsByTagName("footer")[0].innerHTML = footer;
Das backgroundimage soll quasi als einzelnes Bild oben links in die Ecke
2 Antworten
Dein Code tut das eigentlich bereits. Entscheidend ist dann nur noch die Bildgröße. Wenn es zu groß ist, kannst du es mit dem background-size-Property skalieren.
Beispiel:
background-size: 5%;
Allerdings würde ich an dieser Stelle auch einmal hinterfragen, welche Bedeutung das Bild innerhalb des Dokuments hat. Ist es dekorativ oder trägt es aktiv zum Inhalt bei (womit ein img-Element wohl die bessere Wahl wäre). Ganz bestimmt wäre es auch einfacher, nicht für das body-Element den Hintergrund zu definieren, sondern stattdessen mehr zu unterteilen und ein extra Element anzulegen.
Beispiel:
<body>
<header>
<a class="logo" href="...">
<span class="visually-hidden">Zur Startseite</span>
</a>
<!-- ... -->
Dieses extra Element wird auf die notwendige Größe gebracht und positioniert.
body {
margin: 0;
}
.logo {
background-image: url("...");
background-position: left top;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
height: 50px;
width: 50px;
}
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
Das backgroundimage soll quasi als einzelnes Bild oben links in die Ecke
<style>
body {
background: url("Bilder/getraenkeguenther.jpg") no-repeat top left fixed;
height:100vH;
margin: auto;
display: flex;
flex-direction: column;
}
</style>
Alex