Znetrierte Bilder im Header

Hoi.. ich stehe gerade etwas auf dem Schlauch. Ich habe per Artikel ein Bild in den Header geladen. Nun passt sich das bild eh schon automatisch proportional an, wenn ich die Seitenbreite verändere (width: 100%).
Mein Problem ist nun, dass es sich auch vertikel anpassen soll, wenn die browserhöhe geändert wird und zwar derart, dass das Bild nach oben verschoben wird.

Ein Beispel wie es aussehen soll ist hier:

https://www.gmachl.at/?gclid=Cj0KCQj...0aAshVEALw_wcB

Die haben das allerdings mit einem Background Image gelöst. Ich bekomme die vertikale centrierung zwar damit hin, aber dann geht logischerweise die horizontale skalierung des Bildes nicht mehr..

Code:

---

position: absolute;
  top: 50%;
  left: 50%;
          width: 2000px;
  height: 900px;
  margin-top: -450px; /* Half the height */
  margin-left: -1000px; /* Half the width */}

---

Hat da vlt jemand eine Idee?

Danke Euch

Hallo,

wohl keine Lösung aber mit dem Weg des Hintergrundbildes ein rascher workaround ;-)
mach anstatt dem CE Bild ein CE HTML und erstelle ein "leeres" <div> dem du via CSS ein Hintergrundbild zuordnest

Code:

---

div {width: 100%;
height: 100vh;
background: url(../../img/mein/pfad/zum/hintergrund.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
...
}

---

Wird wohl nicht anders machbar sein.. ist zwar nen Krampf, wenn der Kunde das Bild wechseln möchte und bei über 40 header mühsam, aber immerhin eine Lösung!

Danke Dir

LG

Zitat:

---

Zitat von macbee

Wird wohl nicht anders machbar sein.. ist zwar nen Krampf, wenn der Kunde das Bild wechseln möchte und bei über 40 header mühsam, aber immerhin eine Lösung!

Danke Dir

LG

---

In solchen Fällen habe ich den Ordnerpfad und Dateinamen an den Kunden übergeben und dann kann das neue Bild mit gleichem Namen, Abmessungen via FTP ausgetauscht werden.

Eine weitere Möglichkeit wäre, dass du via Rock Solid Custom Elements ein CE erstellst, welches deinen Redakteuren erlaubt das Bild via filetree auszuwählen.
Das notwendige template würde dann ebenfalls wieder der <div>-tag sein und darin via inline-style obige CSS-Anweisungen einfügen. Den Pfad zum Bild fügst du dann über $this->myImage ein.

Damit hätten die Redakteure die gleichen/ähnlichen Voraussetzungen wie dein vorhandenes CE Image.

Oder aber du passt gleich dein ce_image template entsprechend an und gehst gleichen Weg wie soeben beschrieben