.wrapper{
  display: inline-block;
  position:relative;
}
.big-img{
  width: 100%;
  max-width: 100%;
  border: 1px solid blue;
}
.small-img{
  border: 1px solid red;
  position:absolute;
  right: 10%;
  top: 10%;
  width: 25%;
  max-width:25%;
}
<div class="wrapper">
  <img class="big-img" src="https://webhostingvirtualdedicatedservers.com/files/2012/09/Web-server.png" />
  <img class="small-img" src="http://loosechange.co.za/wp-content/uploads/2012/06/Personal-Discount-10-lg.jpg" />
</div>

Daher möchte ich ein Logo genau in der Mitte eines Hintergrundbilds platzieren, das die volle Seitengröße (height: 100vh) hat. Ich kann es mit Elementor in ungefähr 10 Sekunden tun, aber ich muss es auf einer Website ohne CMS tun, also ist das schwer für mich. Ich habe buchstäblich jedes Snippet ausprobiert, das ich online finden konnte, aber es ging immer darum, ein Bild über ein anderes Bild zu stapeln, nicht ein Bild über einen ganzseitigen Hintergrund.

Hier ist ein Beispiel für das, was ich gefunden habe: https://jsfiddle.net/uu3pqwpa/

-1
misatoc233 24 Feb. 2020 im 02:45

4 Antworten

Beste Antwort

Ich würde buchstäblich ein background-image im CSS für den großen Container verwenden und Flex-Einstellungen darauf anwenden (Details siehe unten), um das kleinere img -Tag innerhalb dieses div zu zentrieren (dh kein absolutes / relative Positionierung, keine zwei img Tags):

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

.big-img {
  width: 100vw;
  height: 100vh;
  border: 1px solid blue;
  position: relative;
  background: url('https://placehold.it/2000x1500/fda?text=Background-Image') center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.small-img {
  border: 1px solid red;
  width: 30%;
  height: 25vh;
}
<div class="big-img">
  <img class="small-img" src="https://placehold.it/200x100/ab7?text=centered-Image" />
</div>
1
Johannes 24 Feb. 2020 im 00:30

Wenn Sie die Bilder als Hintergrundbilder platzieren, können Sie background-size: cover verwenden und sie in eine beliebige Größe des Containers einpassen.

Die Verwendung von Pseudoelementen wie ::before ist nur eine Möglichkeit, HTML-Code mit Elementen zu löschen, die hauptsächlich zum Stylen dienen.

Jede andere Art von Klarstellung unten im Code als Kommentar.

html, body {
  padding: 0px;  /* remove default spacing */
  margin: 0px;
}

.wrapper {
  position: relative;
  min-width: 100vw;
  min-height: 100vh;  /* min lets the element span beyond the page, if necessary. */
  
  /* didn't find image */
  /* background: url('https://webhostingvirtualdedicatedservers.com/files/2012/09/Web-server.png'); */
  background: url('https://picsum.photos/200/300');
}

.wrapper, .wrapper::before {
  box-sizing: border-box; /* needed to include border size in width and height */
  border: 1px solid blue;

  background-repeat: none;
  background-size: cover;
}

.wrapper::before {
  content: '';
  position: absolute;
  width: 25vw;
  height: 25vw; /* make it squarish */
  
  left: 50%;
  top: 50%;
  /* move element negative 50% of it's own size on both x and y coordinate */
  transform: translate(-50%, -50%);

  border-color: red;
  /* background: url('http://loosechange.co.za/wp-content/uploads/2012/06/Personal-Discount-10-lg.jpg'); */
  background: url('https://picsum.photos/200/200');
}
<div class="wrapper">

</div>
0
Rickard Elimää 24 Feb. 2020 im 00:21

Sie können den Hintergrund des Wrappers mit festlegen

background: url('https://webhostingvirtualdedicatedservers.com/files/2012/09/Web-server.png);

Position relativ halten, aber hinzufügen:

width: 100%; height: auto;

Und dann lassen Sie das kleine Bild absolut positioniert

0
PhunkmasterP 24 Feb. 2020 im 00:18
.wrapper{
  display: flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  
}
.big-img{
  width: 100%;
  max-width: 100%;
  border: 1px solid blue;
}
.small-img{
  border: 1px solid red;
  
  width: 25%;
  height:25%;
}

body {
 background-image: url("https://images.freeimages.com/images/small-previews/1c9/maine-at-4-45-am-1370871.jpg"); 
 background-size: cover;
 }
<div class="wrapper">

  
  <img class="small-img" src="https://images.freeimages.com/images/small-previews/25d/eagle-1523807.jpg"/>
  
  </div>
0
DCR 24 Feb. 2020 im 00:40