Ich bin gerade dabei für die Startseite ein Image auf Vollbild einzusetzten. Es hat eine Auflösung von 2560px x 1440px. Jedoch wenn ich es einfüge verringert sich die Auflösung. Auch wenn ich es über ein widget einfüge wird die Auflösung verringt. Dies führt dazu, dass bei grösseren Bildschrimen das Bild verpixelt wirkt.

Mein HTML Code:

<div id="landingpage">
    <img src="https://kvdnk.2038.io/live as strong as the mountains (5).jpg" />
</div>
 

Mein CSS Code:

#landingpage{
width: 100vw;
position:relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index:1;
      margin-top: calc(-12.5vh + 0%);
}
     #landingpage img{
 
width: 100vw;
}
 

Meine URL:
https://www.blocksolution.io/

Habt ihr irgendeine Idee? Bin gerade dran ein komplettes rework der Seite zumachen jedoch komme ich bei diesem einen Punkt nicht weiter.

Danke Andre, es hat funktioniert :-)