Ein Hallo in die Runde und im besonderen ein Hallo an die ProgrammierProfis unter euch :),

ich benötige dringend eure Hilfe, so langsam bin ich doch dezent verzweifelt, weil ich weder weiß woran es liegt, noch was ich noch machen kann.

Mein Problem: Das Hintergrundbild im oberen Bereich meiner Seite, welches man im Menüpunkt Design einstellen kann. Insgesamt sind es vier, die sich nacheinander abwechseln.

Meine Designvorlage: Zurich

Meine Seite: quadratimformat.de

Das Bild hat eine breite von 2000px und eine höhe von 698px (Das Problem bestand auch, als ich es ursprünglich mal kleiner drin hatte.)

Bei meiner Laptopauflösung von 1280x800px stellt er das Bild auch im ganzen da, so wie es sein sollte. Daher fiel es mir lange Zeit gar nicht auf, wie es scheinbar die meisten Menschen die ganze Zeit schon sahen.

Erst als ich mal bei jemand anderem auf einen 16:9 Bildschirm schaute (1900px breite), fiel ich ja glatt vom Stuhl, da sah das Headerbild extrem vergrößert aus, so das entweder das Logo unten abgeschnitten wurde oder gar nicht mehr zu sehen war (bei dem ersten Headerbild) oder das Logo zu weit oben in der rechten Ecke klebte (bei den anderen dreien). Nur wenn man den Browser kleiner zog, sah es dann irgendwann so aus, wie es sein sollte, was ich nicht verstehe, wenn das Bild doch eigentlich größer ist als die Auflösung des Bildschirmes. Die verschiedensten Browser stellen es auch wieder alle untersch. da XD.

Das ist für mich ein absolutes No Go und sieht gestalterisch total Banane aus.

Das es das Bild irgendwie größer skalieren muss ist ja irgendwie klar, wenn der Bildschirm auch größer ist, aber dafür ist doch das Bild eigentlich auch groß genug dachte ich.

Daher meine Frage: Wieso ist das so, das er quasi in das Bild reinzoomt, je größer die Auflösung ist und was muss ich tun? Ich schätze mal es ist irgendeine Einstellung im CSS aber davon habe ich keine Ahnung und hoffe auf eure Hilfe.

Eigentlich hatte ich mich mit dem Design schon sehr angefreundet, weil ich es mag wenn es über die ganze Seite geht, aber wenn das dann so ist, muss wohl etwas anderes her oder der Header wird weiß und es kommt nur ein Logo rein.

Bei der Handyvariante im Hochformat ist es auch grausam, wenn das Bild zu beiden Seiten abgeschnitten wird, wo ja eigentlich doch recht viele inzwischen über Handy die Seite anschauen und gar nicht mehr am Rechner. Das Menü wird ja leider auch nicht so dargestellt wie am Rechner, aber so ist das mit der Handoptimierung.

Sollte hier wer eine Lösung für mich haben, wäre es noch gut, wenn ihr mir für Nichtkenner noch sagt, wo ich den Code dann einfügen muss?
Ich schätze ja mal unter Einstellungen - Head bearbeiten - Gesamte Webseite? Bleibt der Code dann auch da stehen oder verschwindet der irgendwohin sobald man den abspeichert, den aktuell ist das Feld ja auch leer.

Vielen Dank schon einmal

Hi Steph

Habe deine Website grad angeschaut. Klasse Fotos. Nun zu deinem Problem: Eines deiner Probleme ist, dass du das Logo direkt im Hintergrundbild gespeichert hast. Das ist nicht sinnvoll, da wie du auch richtig beschrieben hast, das Logo teilweise abgeschnitten wird. Das Logo solltest du nicht wie die Hintergrundbilder im Style-Design-Modus einfügen, sondern ganz normal (getrennt vom Hintergrundbild!!!) separat im Adminmodus, wie jedes andere Element (Text, Bilder, Galerie etc.). Sobald du im normalen Adminbereich bist, siehst du oben im Headerbereich die Aufschrift "Logobereich". Dort kannst du dein Logo hochladen. Somit wird dein Logo nicht mit dem Hintergrundbild verzogen, sondern bleibt immer gut und responsiv angepasst sichtbar. Einen Seitentitel kannst du natürlich ebenfalls als Text hinschreiben. Ich würde aber entweder ein Logo oder einen Seitentitel einfügen, auch hinsichtlich des Platzsparens.


Dass sich das Headerbild verziehen kann, je nach Auflösung und je nach Browsergrösse, und vor allem je nach System (Laptop, PC oder Tablet und Smartphone) ist leider Tatsache. Responsivität bedeutet nicht zwingend, dass die Website immer absolut gleich aussieht, sondern dass sie sich auf das System des Users einstellt und entsprechend benutzertauglich dargestellt wird. Natürlich sollte das Layout schlussendlich einigermassen dem Ursprung entsprechen.


Beiliegend hier unten ein CSS-Code, wie du den Headerteil auf 300px setzen kannst, sobald der Bildschirm eine Maximalbreite von 1152px hat. Dein Logo wäre in dem Fall maximal 200px hoch (als Beispiel). Du kannst die Werte natürlich individuell anpassen. Du musst den Code bei Head bearbeiten einfügen (Gesamte Website). Bei Nichtgefallen kannst du den Code einfach wieder löschen.

ACHTUNG: Der CSS-Code bezieht sich bereits auf den Fall, dass du das Logo wie vorgesehen als separate Bilddatei einfügst und nicht im Hintergrundbild mitscaliert wird.

<style type="text/css">
 
/*<![CDATA[*/ 
 
@media screen and (max-width: 1152px) {
div.jtpl-header.jqbga-container.jqbga-web--image
{ height: 300px !important; min-height: 300px !important; max-height: 300px !important; }
 
header.jtpl-header__inner
{ height: 300px !important; min-height: 300px !important; max-height: 300px !important; }
 
div.jtpl-logo
{ max-height: 200px !important; 
vertical-align: middle !important; padding-top: 0px !important; margin-top: 0px !important; top: 0 !important; }
 
div#cc-website-logo.cc-single-module-element
{ max-height: 200px !important; 
vertical-align: middle !important; padding-top: 0px !important; margin-top: 0px !important; top: 0 !important; }
 
div.cc-m-image-container
{ max-height: 200px !important; 
vertical-align: middle !important; padding-top: 0px !important; margin-top: 0px !important; top: 0 !important; }
 
figure.cc-imagewrapper cc-m-image-align-3, img
{ max-height: 200px !important; 
vertical-align: middle !important; padding-top: 0px !important; margin-top: 0px !important; top: 0 !important; }
 
}
 
/*]]>*/ 
</style>
 

Viel Glück...

Gruss
Butterman

Hallo Buttermann,

lieben Dank für deine Hilfe. :)

Das Logo hatte ich damals bewusst nicht in den dafür gedachten Bereich eingefügt, weil ich da das Logo gaube ich nicht auf die Höhe einfügen konnte wo es optisch am besten reingepasst hätte und es farblich ja auch nicht immer auf jedes Bild so passte, bei dem ersten Headerbild würde es auch gar nicht klappen, dann wäre es ja mitten über den Bildern :D

Ich fand es eben gerade bei dem ersten Bild recht erschreckend, wie groß das teilweise an manchen Bildschirmen gezogen wird. Ich denke du hast schon gesehen wie es im Original aussieht, das eigentlich noch einiges an Raum drumrum ist, was bei einigen so extrem rangezoomt wird das sogar schon die Bilder abgeschnitten werden , das kann so eben gar nicht bleiben.

Blöde Frage für Ahnungslose, was genau bewirkt der Code dann ?

Gibt es eine Möglichkeit, das sich die Seite links und rechts jeweils um eine weiße Fläche erweitert, je größer der Bildschirm ist und somit das Bild immer unberührt bleibt und sich nicht vergrößert?, dann geht es zwar nie mehr bis zum Rand aber wenigstens bleibt es dann so mit dem Logo erhalten, ich hoffe du verstehst wie ich das meine :D

so seh ich es und so sollte es aussehen.
Wenn der logobereich oben ist, wie kriegt ma das Logo dann unten eingefügt und dann noch weiter rechts als der vorhandene bereich eigentlich ist? :D

Denn wahrscheinlich würde ich dann die wechselnden Bilder weglassen und nur das Bild nehmen, da ich bei vier Bildern nicht ein Logo für alle nehmen kann, denn wenn der Himmel bei dem Foto weiß ist, sieht man schon die weiße Schrift nicht mehr usw.

Hi Steph

Du kannst dein Logo mittig oder auch rechts- oder linksbündig setzen. Mit CSS kannst du zusätzliche Anpassungen machen.

Zitat

---

bei dem ersten Headerbild würde es auch gar nicht klappen, dann wäre es ja mitten über den Bildern :D

---

Ja, natürlich. Aber Hintergrundbilder stehen nun mal "im Hintergrund". Da darfst du Mut beweisen und ein Logo darüber platzieren. Wenn auf den Hintergrundbildern alles so relevant ist, dass das Logo nix davon überdecken darf, kannst du das Logo auch immer am gleichen Platz, z.B. unten links, oben rechts etc. platzieren und die Hintergrundbilder entsprechend so auswählen, dass dort möglichst immer alles neutral bleibt.

Zitat

---

Blöde Frage für Ahnungslose, was genau bewirkt der Code dann :D?

---

Wie ich schon beschrieben habe:

Zitat

---

[… ] wie du den Headerteil auf 300px setzen kannst, sobald der Bildschirm eine Maximalbreite von 1152px hat. Dein Logo wäre in dem Fall maximal 200px hoch (als Beispiel).

---

Zu deinem letzten Posting:
Wie ich aus deinem letzten Posting entnehme, hast du vor, dein Logo immer unten rechts zu platzieren. In dem Fall kannst du den ersten Code abhaken und diesen neuen Code gleich hier unten mal probieren. Es macht Folgendes:

Die Höhe deines Headers ist auch in der Mobilansicht nicht kleiner als 300px. Dein Logo rückt nach unten rechts mit einem Abstand unten und rechts von jeweils 30px. Wie immer kannst du alle Werte selbst individuell anpassen. Und weiter gilt: Bei Nichtgefallen oder Nichtfunktionieren, einfach den Code wieder löschen.. UND AUCH HIER GILT: Dein Logo ist als Logo separat auf die Seite geladen, und nicht als Hintergrund..

<style type="text/css">
 
/*<![CDATA[*/ 
 
div.jtpl-logo
{ text-align: right !important; position: absolute !important; right: 0px !important; margin-right: 0px !important; 
  padding-right: 30px !important; padding-right: 0px !important; vertical-align: bottom !important; padding-bottom: 30px !important;
  margin-bottom: 0px !important; bottom: 0 !important; }
 
@media screen and (max-width: 1152px) {
div.jtpl-header.jqbga-container.jqbga-web--image
{ height: 300px !important; min-height: 300px !important; max-height: 300px !important; }
 
header.jtpl-header__inner
{ height: 300px !important; min-height: 300px !important; max-height: 300px !important; }
 

div.jtpl-logo
{ text-align: right !important; position: absolute !important; max-height: 200px !important; margin-right: 0px !important; 
  padding-right: 30px !important; vertical-align: bottom !important; padding-bottom: 0px !important; margin-bottom: 30px !important;
  bottom: 0 !important; }
 
}
 
/*]]>*/ 
</style>
 

Hi az

Danke dir für die Hinweise.

Gruss
Butterman

was macht denn dieses important?

Ich habe jetzt das Bild mit den mehreren s/w Bildern in den Text eingefügt, da weiß ich wenigstens, das es sich nicht mehr wahllos wo abschneiden lässt :D

im Header habe ich nur noch zwei Bilder genommen, bei denen es nicht so schlimm ist wenn er die hochskaliert und das Logo in den dafür gedachten Bereich eingefügt, gefällt mir jetzt zwar alles nicht mehr so aber da muss man sich anpassen :)

Eine Frage habe ich noch, was kann man denn machen, damit der untere dunkle Bereich, wo Impressum und Co drinsteht nicht so hoch ist, sondern mindestens um die hälfte niedriger?

Hi Steph

Zitat

---

was macht denn dieses important?

---

Die Wirkung von "!important" steht immer über einem eventuell bereits vorhandenem "CSS-Code". Das heisst, egal, welche Tags bereits für bestimmte Elemente im CSS-Code stehen, sie werden sozusagen mit dem "!important" überboten.

Zitat

---

was kann man denn machen, damit der untere dunkle Bereich, wo Impressum und Co drinsteht nicht so hoch ist, sondern mindestens um die hälfte niedriger?

---

Hier ein möglicher Code, den du versuchen kannst:

.jtpl-section-aside {
     height: 140px;
     max-height: 140px;
     min-height: 120px;
     padding-top: 10px;
     margin-bottom: 0px;
     padding-bottom: 0px;
     bottom: 0px;
}
 .jtpl-footer {
     margin-bottom: 0px;
     padding-bottom: 0px;
     padding-top: 0px;
}
 .jtpl-section-aside__inner {
     padding-top: 0px;
     padding-bottom: 0px;
     height: auto;
}
 .jtpl-footer.footer-options {
     height: 100px;
}
 div#contentfooter {
     height: 100px;
}
 
 

Der Code bewirkt, dass dein Footerbereich eine Höhe von 140px hat (min 120px) und auch nicht überschreitet (max 140px). Bei Nichtgefallen, wie immer einfach löschen..

Gruss
Butterman