Jimdo MIAMI Header(hintergrund)bild soll mobil optimiert werden.

12.02.2020 16:05

Pumukel
#1

Hallo zusammen,

Ich bin grad echt am verzweifeln... Sitze schon ewig hier dran aber es will nicht so wie ich das will...

Aber nun zum Thema... :-)
Ich habe dazu schon im Forum gesucht und die diversen Ansätze ausprobiert. Möchte daher also nicht ausschließen, dass ich sich die Lösung schon hier im Forum befindet, ich sie vielleicht auch sogar schon gelesen habe, aber leider das ganze nicht umsetzen konnte... Also habt bitte Nachsicht falls dem so ist.

Unsere Seite ist anker-alpen.de

Das Headerbild bei der Designvorlage MIAMI ist ja als Hintergrundbild implementiert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<div class="jtpl-header jqbga-container jqbga-web--image" background-area="stripe" background-area-default="" style="background-image: url("https://image.jimcdn.com/app/cms/image/transf/none/path/s0042698f2568d618/backgroundarea/i2f7f82afea235a12/version/1563960386/image.jpg");">
      <div class="jtpl-header__inner">
        <div class="jtpl-title navigation-alignment">
          
        </div>
        <div class="jtpl-logo">
          <div id="cc-website-logo" class="cc-single-module-element"><div id="cc-m-7460661751" class="j-module n j-imageSubtitle"><div class="cc-m-image-container"><figure class="cc-imagewrapper cc-m-image-align-3">
<a href="https://www.anker-alpen.de/" target="_self"><img srcset="https://image.jimcdn.com/app/cms/image/transf/dimension=298x10000:format=png/path/s0042698f2568d618/image/i89a4d1341ffd3ac7/version/1581513452/image.png 298w, https://image.jimcdn.com/app/cms/image/transf/dimension=320x10000:format=png/path/s0042698f2568d618/image/i89a4d1341ffd3ac7/version/1581513452/image.png 320w, https://image.jimcdn.com/app/cms/image/transf/dimension=596x10000:format=png/path/s0042698f2568d618/image/i89a4d1341ffd3ac7/version/1581513452/image.png 596w" sizes="(min-width: 298px) 298px, 100vw" id="cc-m-imagesubtitle-image-7460661751" src="https://image.jimcdn.com/app/cms/image/transf/dimension=298x10000:format=png/path/s0042698f2568d618/image/i89a4d1341ffd3ac7/version/1581513452/image.png" alt="" class="" data-src-width="637" data-src-height="747" data-src="https://image.jimcdn.com/app/cms/image/transf/dimension=298x10000:format=png/path/s0042698f2568d618/image/i89a4d1341ffd3ac7/version/1581513452/image.png" data-image-id="4812704051"></a>    
 
</figure>
</div>
<div class="cc-clear"></div>
</div></div>
        </div>
      </div>
    </div>
 

Das Problem ist nun, dass wir für bestimmte Ankündigungen gerne einen Störer auf dem Bild hätten.
Wir haben das relativ einfach gelöst in dem wir das Bild schon mit diesem Störer hochgeladen haben. Denn ich kann ja nur einen Seitentitel hinterlegen (das sieht einfach fade aus) oder zentral das Logo hochladen.
Da aber bei der mobilen Darstellung das Bild nicht einfach verkleinert, sondern zugeschnitten wird wird auch der Störer abgeschnitten.

Meine erste Idee war das mal mit Media Queries zu probieren und den speziellen Code im HEAD zu hinterlegen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<style type="text/css">
/*<![CDATA[*/
/*jtpl-header jqbga-container jqbga-web--image
--------------------------------------*/ 
.jtpl-header jqbga-container jqbga-web--image{
   background-image: url("https://image.jimcdn.com/app/cms/image/transf/none/path/s0042698f2568d618/backgroundarea/i2f7f82afea235a12/version/1563960386/image.jpg");
}
@media only screen and (max-width: 300px){ 
   .jtpl-header jqbga-container jqbga-web--image{
      background-image: url("Platzhalter.jpg");
   }
}
/*]]>*/
</style>
 

Aber das hat leider nicht funktioniert...
Habe auch versucht mit einer JS IF-ELSE-FUNKTION das ganze <div> zu tauschen, aber hat leider auch nicht geklappt (Da hab ich den Code leider nicht mehr - hab es nur in Chrome versucht mit der TAG Bearbeitung.)

Jetzt ist grad meine einzige Alternative den LOGO Block zunutze und dort den Störer zusammen mit dem Logo hochzuladen. Aber das ist optisch auch eher unschön...

Ich sehe aktuell eine einfachere Version:
-->Ich tausche (irgendwie) mit einem Media Query das Hintergrundbild aus.
Ich sehe eine komplizierte Version:
--> Ich integriere ein neues Modul und eine neue CLASS die das Hintergrundbild einfach überlagert.

Wie seht ihr das?

Danke für Eure Hilfe!