Ich versuche, ein "Danke" -Banner hinzuzufügen, das reagiert und die Position auf jedem Bildschirm behält.Wie füge ich ein Element über ein Bild in HTML ein?
Was ich habe: (mit dem Etikett)
Was ich will: (Bild mit horizontal ansprechender bar) So: 
Dies wird vertikal und horizontal Zentrum ein Element mit 100% Breite.
body {
margin: 0;
background: transparent url("https://images.unsplash.com/photo-1459664018906-085c36f472af?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0eee25e1e8252c9ec91aa736760d1a2e") 0 0 no-repeat;
background-size: cover;
}
p {
background: black;
padding: 1em 0;
color: white;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}<p>Thank You!!</p>Sie können auch diesen Code versuchen:
<style>
img {
width: 100%;
height: 40em;
}
h1 {
align-self: center;
width: 100%;
padding: 1em;
background-color: black;
color: white;
text-align: center;
}
</style>
</head>
<body>
<img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0eee25e1e8252c9ec91aa736760d1a2e" alt="">
<h1> Beautiful flower</h1>
</body>
div.wrapper{
float:left; /* important */
position:relative; /* important(so we can absolutely position the description div */
}
div.content{
position:absolute;
bottom:0px;
left:0px;
width:100%;
font-family: 'tahoma';
font-size:15px;
color:white;
}
div.content p{
background: black;
padding: 1em 0;
color: white;
text-align: center;
position: absolute;
top: -150px;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
opacity:0.8
}<!DOCTYPE html>
<html>
<title></title>
<body>
<div class='wrapper'>
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" style="max-width:1170px; max-height:301.333px;min-width:1170px; min-height:301.333px;">
<div class=content >
<p>Thank you</p>
</div>
</div>
</body>
</html>
Und wie stelle ich das Hintergrundbild wie gewünscht ein? –
Bitte werfen Sie einen Blick auf die aktualisierte Antwort. –