What I am trying is to get a section that has a height of 450px and in the background should be a picture with sort of a text-box on top of it.
I just can not make a shift to the picture with using margins. I would like it to be more centered, but whatever I use, it does not work. Also it does not fill 100% even if I set width to 100% in any class.
.text-and-image {
position: relative;
width: 100%;
height: auto;
max-height: 450px;
display: flex;
overflow:hidden;
object-fit: cover;
background: steelblue;
/* background: rgb(156, 156, 156); */
}
.text-and-image-box{
position: relative;
width: 100%;
height: auto;
object-fit: cover;
}
.text-and-image-image{
width: 100%;
max-height: 600px;
height: auto;
background: yellow;
object-fit: cover;
}
.text-and-image-box2{
position: absolute;
top: 10%;
left: 55%;
width: 35%;
padding: 2%;
height: auto;
background: white;
}
.text-and-image-caption{
position: relative;
height: auto;
background: white;
font-size: 30px;
font-style: oblique;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" name="Website">
<link rel="stylesheet" href="./fragebeispiel.css">
<title>AMH Solingen</title>
</head>
<body>
<!-- Text neben Bild -->
<div class="text-and-image">
<div class="text-and-image-box">
<img class="text-with-image-image" src="https://images.unsplash.com/photo-1513135065346-a098a63a71ee?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1049&q=80">
</div>
<div class="text-and-image-box2">
<p class="text-and-image-caption">Ein schlechtes Messer f?hrt leichter in die Hand als ins Brot.</p>
<p class="text-and-image-text">Jeder Hobby- oder Profikoch braucht gutes Werkzeug. Nur damit macht es Spa? und ist sicher. Solinger Küchenmesser und Stahlwaren bestechen schon seit Jahrhunderten durch ausgezeichnete Qualit?t, hohe Langlebigkeit und innovative L?sungen. Das merkt man und hat seinen Weg schon in Millionen von Küchen in aller Welt gefunden. Unser Statement: </p>
</div>
</div>
</body>
</html>
