Headerbild

[fw-thomas]

guten Morgen,
ich bin nun dabei mich mit Redaxo 5 zu beschäftigen, fummel mich solala durch.

Nun habe ich ein Headerbild eingestellt welches nun leider so aussiehst

r5-headerbilder.jpg (141.68 KiB) 18067 mal betrachtet

Das Bild hat allerdings die Breite von 1000pixel x 308pixel.

An welcher Stelle oder in welcher Datei kann ich das anpassen. Leider hat das Firebug mir es bisher nicht verraten ..


schönen Sonntag noch zu euch

[Oliver.Kreischer]

Hallo Thomas,

Nun habe ich ein Headerbild eingestellt welches nun leider so aussiehst

Was ist damit?
Natürlich fällt mir etwas auf. Aber ich weiß ja nicht ob ich richtig liege. Evtl meinst Du auch etwas anderes?

An welcher Stelle oder in welcher Datei kann ich das anpassen.

Hm.
Da jedes REDAXO Projekt anders ist kann ich nur antworten: KEINE AHNUNG.
Ich kenne Die Seite nicht.

Bitte beschreibe das Problem und den Wunsch genauer.

LG
Oliver

[fw-thomas]

Wo kann ich die pixelgrösse einstellen, so daß ich das gesamte Bild sehen kann.

Das oben gezeigte Bild zeigt es leider stark vergrößert

Mfg thomas

[Cobalt60]

Hallo,
jedes Redaxo-Projekt ist anders - hat Du Dir vielleicht die REX5 Demo installiert und wolltest da die Header tauschen?
Oder ist´s ein eigenes Projekt? Die URL wäre auf jeden Fall hilfreich ...

[fw-thomas]

Ich habe die Demo Community installiert.

Und baue mir diese gerade um nach meinen Bedürfnissen, so wie ich es schon mit der r4 Version gemacht habe.

Das original liegt hier www.feuerwehr-friesland.de


Mfg
Thomas

[Thomas.Skerbis]

Hallo.
Die Höhe der des Header-Wrappers in der Community-Demo wird durch
.header-wrapper .header und .header-wrapper .header .filter::after definiert.
Verzeichnis: (/resources /css/base.css)

Die Bildqualität stellt man im Media Manager beim Mediatyp header ein.
Ich glaube aber, dass das gewünschte Bild für diese Art der Darstellung ungeeignet ist.

[fw-thomas]

So das hab ich in der base.css gefunden

Code: Alles auswählen

  .header-wrapper .header {
    background-color: #B2AFAB;
    background-position: center center;
    background-size: cover;
    height: 550px;    <<<< würde ich  ändern auf 356px
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 1; }
    .header-wrapper .header .filter::after {
      background-color: rgba(0, 0, 0, 0.5);
      content: "";
      display: block;
      height: 550px;    <<<< würde ich  ändern auf 356px
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 2; }

[Thomas.Skerbis]

Ja, versuch mal. Nur Deine Collage wird sicher nicht immer passen, da die Website auf die volle Breite geht.
Wenn Dein Bild nur 1000px breit ist aber der Bildschirm z.B. 1600 wird es nicht passen. Das Bild wird dann skalliert bis es hinein passt.
Das Headerbild ist eher für Einzelbilder ausgelegt deren Focus auf der Mitte des Bildes liegen.

[fw-thomas]

So sieht es nun aus nach der Änderung

r5-header2.jpg (93.46 KiB) 17964 mal betrachtet

Anbei die Daten des Bildes

header-daten.jpg (26.36 KiB) 17964 mal betrachtet

gruß thomas

[fw-thomas]

also in diesen Code muss irgendwas umgestell werden . habe mit Firebug rumgespielt und damit habe ich auf jedenfall das Bild kleiner bekommen

Code: Alles auswählen

.header-wrapper {
  position: relative;
  height: 250px; }
  .header-wrapper .navbar {
    border-radius: 0;
    position: absolute;
    width: 100px;
    z-index: 3; }
  .header-wrapper .header {
    background-color: #B2AFAB;
    background-position: center center;
    background-size: cover;
    height: 308px;
    overflow: hidden;
    position: absolute;
    width: 100px;
    z-index: 1; }

[robo]

Hallo,
also ich würde dir ganz dringend z.B. das hier empfehlen bevor du weitermachst:

http://www.peterkropff.de/site/css/css.htm

Der schreibt findich ich ganz witzig und danach ist dir sicher einiges klarer

[fw-thomas]

ja werde ich lesen, wenn ich die zeit dazu haben ..

mfg
thomas

[Peter.Bickel]

Noch ein ergänzender Hinweis, in der Com-Demo wird das Headerbild auf eine Größe von 1050 * 855 "gezwungen". Bei größeren Bildern kein Problem, kleinere Bilder werden natürlich dann pixelig.
Die vielleicht überraschend große Bildhöhe kommt bei kleineren Screens zum Einsatz.
Du kannst diese Einstellung im Media Manager ändern.

[fw-thomas]

Super das Bild habe ich damit schon mal kleiner bekommen

r5-header3.jpg (203.74 KiB) 17892 mal betrachtet

mfg
thomas