Hintergrundbild anpassen

  • Ich wollte das Hintergrundbild austauschen. An sich gibt es in den Style Einstellungen eine sehr komfortable Lösung dafür indem man ein neues Hintergrundbild auswählt und noch angibt ob es "normal" oder "fixiert" positioniert werden soll. Fertig. Da ich eine spezielle Auflösung des Hintergrundbildes verwende (1.920 x 1.200) und in der oberen linken Ecke einen Schriftzug habe, möchte ich dass das HG-Bild immer "left top" ausgerichtet wird. Zuhause wo mein Bildschirm eben genannte Auflösung hat ist mir das noch nicht aufgefallen, als ich mir die Seite allerdings auf einem Bildschirm mit einer kleineren Auflösung angeschaut habe, war der Schriftzug in der linken oberen Ecke halb abgeschnitten und auch am rechten Rand wurde das Bild beschnitten.


    Da hab ich im Style CSS File den Wert "background-position: left top" hinzugefügt und damit das HG-Bild auch mit kleineren Auflösungen als 1.920 x 1.200 Pixel vollständig sichtbar ist auch noch "background-size: cover" angegeben. Hat ihn wenig interessiert ;) ^^ Daraufhin hab ich mir im Firebug mal den CSS Code angeschaut und festgestellt dass von irgendwoher dieser Code meine CSS Einstellungen überschreibt:


    HTML
    1. body {
    2. background:#000000 url('{TEMPLATE_BACKGROUND}') no-repeat center top;
    3. background-attachment: {T_BACKGROUND_POSITION};
    4. }


    Auf der Suche nach einem "Master CSS" File bin ich dann in die index.tpl gestolpert und da war er dann der Übeltäter! :D Zuerst dachte ich mir raus mit dem Zeug. Bumm! Fatal Error! :D Okay, dann doch nicht raus damit ^^ Habe den Code dann wie folgt angepasst:



    Code
    1. body {
    2. background:#222222 url('{TEMPLATE_BACKGROUND}') no-repeat left top;
    3. background-size: cover;
    4. background-attachment: {T_BACKGROUND_POSITION};
    5. }


    Und siehe da jetzt ist das Ergebnis wie gewünscht: Das HG-Bild ist oben links ausgerichtet und passt sich automatisch an die jeweilige Auflösung an. Dachte mir vielleicht kann das auch mal jemand brauchen. Falls ihr Fragen habt einfach fragen. Ich helfe gerne weiter wenn ich kann.

  • @GodMod, danke für den Tipp mit dem custom.css File. Das ist natürlich die schönste Variante und werde ich dann Zuhause erstellen.
    @Inkraja, dass das HG-Bild mobil nicht gut ausschaut ist mir auch schon aufgefallen aber noch schlimmer ist es in der Origianlversion :) Da wird es nämlich total verzerrt dargestellt. Fällt beim dunklen originalen HG-Bild nicht weiter auf, wenn man dieses aber ändert und heller macht schon. Hier werde ich es dann aber wie im WBB machen und ein eigenes, mobiles HG-Bild verwenden:


    CSS
    1. @media screen and (max-width: 800px) {
    2. body {
    3. background-image: url(@{style_image_path}bodyBGmobil.jpg);
    4. background-size: auto;
    5. background-repeat: no-repeat;
    6. background-attachment: fixed;
    7. background-position: left top;
    8. z-index: 0;
    9. }
    10. }
  • Deshalb sagte Inkraja ja auch, das Logo vom Hintergrund trennen und separat positionieren, da gibts auch Optionen, dann wirds auch immer da angezeigt, wos sein soll und ich würde mal vermuten auch in der mobilen Version sähe es besser aus.


    Grüße
    Logo einfügen

    Position LOGO

  • Ein Screenshot sagt mehr als 1000 Worte ^^ Das Banner hab ich schon als einzelne Grafik positioniert und das wird auch immer korrekt angezeigt (Desktop und Mobil). Es geht mir um den im Screenshot rot umrandeten Schriftzug. Dieser ist fix auf dem Hintergrundbild positioniert weil ich den in der Banner Grafik nicht brauchen kann. Und wenn das HG-Bild immer schön oben links ausgerichtet wird, gibt es damit auch keine Probleme bis auf die mobile Darstellung. Hier wird extrem stark in das Hintergrundbild hineingezoomt. Keine Ahnung warum. Habe ein paar mobile Browser ausprobiert. Ist bei allen so und auch kein spezielles Problem von EQDKP. Habe dieses Verhalten auch mit dem HG-Bild des WBB. Daher nehme ich für die mobile Darstellung ein anderes Hintergrundbild und löse damit auch dieses Problem ^^


    Mir ging es lediglich darum aufzuzeigen warum die Anpassung des CSS nicht sofort den gewünschten Effekt gebracht hat. Dass man solche Anpassungen updatesicher in einem selbst erstellten custom.css File machen kann ist ein Tipp von GodMod und finde ich echt schön gelöst :thumbup:



    Danke für euer Feedback! Von meiner Seite ist dieses Thema erledigt.

  • Hab noch eine kurze Frage und zwar wie kann ich bei EQDKP mobil ein anderes HG-Bild einbinden?


    Ich wollte diesen Code hier verwenden (stammt aus dem WBB CSS):


    CSS
    1. @media screen and (max-width: 800px) {
    2. body {
    3. background-image: url(files/system/bodyBGmobil.jpg);
    4. background-size: auto;
    5. background-repeat: no-repeat;
    6. background-attachment: fixed;
    7. background-position: left top;
    8. z-index: 0;
    9. }
    10. }


    Jedoch denke ich mal kann EQDKP mit "@media" nichts anfangen. Es wird jedenfalls nicht das gewünschte Bild angezeigt sondern nach wie vor das Standard-HG-Bild. Wenn ich das Bild unter data/ordnermitvielenbuchstabenundzahlen/files/system/ abgelegt habe, stimmt dann überhaupt die Bildpfadangabe wie oben verwendet? Danke! :)

  • Ich bin zwar immernoch etwas irritiert über dein vorgehn und dem problem aber nein, wie god bereits ansätzte, @media sind legitime CSS regeln EQdkp hat da nix mit zutun^^
    Und joa, der Pfad ist logischerweise falsch, sieht man ja auch per Firebug/elemente untersuchen bla bup,.. das er das bildchen nicht findet weil er sonstwo sucht.
    ..also pfad anpassen bzw bild dem pfad entsprechend abspeichern, oder das bild in dein template ordner speichern und mit TEMPLATE_IMAGE_PATH & co arbeiten .

  • TEMPLATE_IMAGE_PATH klingt super und am liebsten würde ich genau solche Pfadangaben verwenden. Gibt es eigentlich ein Wiki welche Variablen es da so gibt und auf welches Verzeichnis sie zeigen?


    Danke für eure Hilfe und demnach wird obenstehender Code funktionieren wenn der Bildpfad passt. Mich hat nur ein wenig irritiert dass trotz des fehlerhaften Pfads weiterhin das "Desktop HG-Bild" angezeigt wurde. Ich hätte mir erwartet dass dann kein HG-Bild mehr angezeigt wird bei mobiler Darstellung. Daher hatte ich die unverschämte Vermutung dass noch mehr im Code nicht passt und da nur @media eine spezielle Formulierung ist, habe ich eben diesen Befehl verdächtigt :)

  • ..ahja im wiki haben wir so einiges, einfach mal schauen... oder unsere SuFu nutzen die sucht im forum und gleichzeitig im wiki etc...
    https://eqdkp-plus.eu/wiki/Eigener_Style


    und ja das ist halt der Spaß an CSS.. definitonen werden nicht eifnach ausgelassen,.. da du ja die body { background } ohne @media bereits definiert hast nimt er dies als fallback sofern die background regel im @media body nicht greifen tut wegen syntax fehler oder ähnlichem .. css ist da bissl tricky mit dem ganzen abhängigkeiten und prioritäten jeder einzelnen definiton

  • Bin offenbar zu doof dafür :( Habe folgenden Code verwendet doch es wird nach wie vor das Desktop HG-Bild angezeigt. Was mach ich falsch? Das mobile HG-Bild bodyBGmobil.jpg liegt korrekt im Template Image Ordner. Ich vermute die Pfadangabe passt so noch nicht? Was ist der Unterschied zwischen @media all und @media screen?


    CSS
    1. @media screen and (max-width: 800px) {
    2. body {
    3. background-image: url('TEMPLATE_IMAGE_PATH'bodyBGmobil.jpg);
    4. background-size: auto;
    5. background-repeat: no-repeat;
    6. background-attachment: fixed;
    7. background-position: left top;
    8. z-index: 0;
    9. }
    10. }
  • Ich habe mich mit CSS zwar bisher noch überhaupt nicht auseinandergesetzt, aber durch kurzes Befragen von Google habe ich das hier gefunden: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
    Dort steht auch beschrieben, was die diversen Parameter bringen.


    Passt denn dein verwendeter Browser zur Kompatibilitätsangabe auf verlinkter Seite? Die ist zwar vermutlich nicht komplett, aber das wäre eventuell schon einmal ein möglicher Anhaltspunkt, wenn dies nicht beachtet wird.

  • Und @media (all/screen/mobile/...) sind angaben auf welche Geräte mit dem folgenden Parametern wie weite oder höhe greifen soll.. so gilt screen ausschließlich für desktop geräte , auf handy tablet und co würdest immer dein großes hg gedöns bild sehn da wird nie die media greifen.

  • Besten Dank für euer Feedback. Nachdem alle Tipps nicht funktioniert haben, habe ich den Pfad zum HG-Bild mal direkt eingegeben. Das Bild ist 100 %ig vorhanden und kann auch direkt über die URL aufgerufen werden. Der Pfad passt also definitiv. Dennoch erfolgt keine Änderung des HG-Bildes bei mobiler Anzeige. Selbstverständlich habe ich den Template-Cache gelöscht und es direkt an meinem Smartphone und auch durch kleiner ziehen des Desktop-Browserfensters getestet. Ohne Erfolg. Diese CSS Angabe in der custom.css wird beharrlich ignoriert :)


    CSS
    1. @media screen and (max-width: 800px) {
    2. body {
    3. background-image: url('http://raid.unitedresistance.eu/templates/eqdkp_tsw_agartha/images/bodyBGmobil.jpg');
    4. background-size: auto;
    5. background-repeat: no-repeat;
    6. background-attachment: fixed;
    7. background-position: left top;
    8. z-index: 0;
    9. }
    10. }