Zentrieren von Hintergrund auf einen Punkt

[jolle775]

Grüßt euch,


bei einem Projekt https://dorianbeck.com möchte ich das Startbild


1. Über die komplette Breite/Länge
2. Responsive
3. Resourcenschonend sowie
4. bei verkleinerung auf Ipad/Handy die beiden Gebirgsspitzen im rechten Drittel Fokusieren


Derzeit besteht das ganze aus einem div, der als Hintergrund das besagte Bild hat.

#splash {
  background-image: url('https://www.dorianbeck.com/assets/img/DSC_1200.png');
  background-size: cover;
  background-repeat: no-repeat;
}

Vorher hatte ich ein Code, der verschiedene Bilder bei verschiedenen Viewportgrößen geladen hat. Ging ganz nett, dann waren diese aber nicht über den kompletten Bildschirm, manchmal unten ein weißer Rand etc.


Gibt es für die Zentrierung auf die 2 Spitzen eine andere, code basierende Lösung, ohne das ich das Bild für jeden Viewport mir so zurechtschneide wie ichs brauche?


Vielen Dank im Voraus

 

[developr]

Du kannst das mit den Displaygrößen mittlerweile ganz einfach per CSS machen.

@media (min-width: 1000px) {
div { background:red; }
}

@media (max-width: 1000px) {
div { background: blue; }
}