Hallo,
ich arbeite gerade am Grundkonzept meines User Control Panels, aus reinem Interesse am lernen.
Folgendes Problem stellt sich mir. Ich möchte gerne mein Design wie im Bild unten im Spoiler aufbauen, sprich in diesem "Container" alle relevanten Dinge und drum herum einfach ein Background.
Sprich der Backround scheint an beiden Seiten, sowie oben und unten heraus.
Mein HTML Code sieht derzeit wie folgt aus
HTML
<html>
<head>
<title>Control Panel </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="background-box">
<h1>Login</h1>
</div>
</body>
</html>
Alles anzeigen
Sowie mein CSS Code:
CSS
body
{
margin: 0;
padding: 0;
background-color: blue;
background-size: cover;
background-position: center;
font-family: sans-serif;
}
.background-box
{
width: 500px;
height: 500px;
color: red;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
Alles anzeigen
Leider funktioniert das ganze nicht so. Derzeitiges Resultat:
Ich bitte um Hilfe! Zudem wollte ich gerne fragen, wie ich es realisiere, dass das ganze Design responsive ist.