[GELÖST] Script Funktioniert im Chrome, nicht im Firefox

[betra]

Ich möchte auf einer Seite ein Hintergrundbild anzeigen.
Das Bild soll sich an die Seitengröße anpassen.
Das klappt mit CSS background-size: contain;.
Wenn jetzt das Fenster vergrößert oder verkleinert wird, soll das DIV mit dem Hintergrundbild automatisch angepasst werden.

im HEAD lade ich folgendes js:

function Fensterweite()
{
  Weite = window.innerWidth - 20;
 return Weite;
}

function neuAufbau()
{
 if (Weite != Fensterweite())
 //alert('blah blah');
 //window.history.go(0);
 window.location.reload();
}

/*Überwachung von Netscape initialisieren*/
if(!window.Weite && Fensterweite())
  {
   window.onresize = neuAufbau;
   window.Weite = Fensterweite();
  }

function wie_gross()
{
 divobj = document.getElementById('wrap');
 document.getElementById("wrap").style.width = divobj.offsetWidth + "px";
 document.getElementById("wrap").style.height = divobj.offsetWidth*0.714128 + "px";
 Weite = window.innerWidth - 20;
 return Weite
}

Weitestgehend kopiert von:
https://www2.informatik.hu-berlin.de/Themen/www/selfhtml/javascript/beispiele/fensterueberwachen.htm

im Body liegt folgendes Script:

<script language="JavaScript" type="text/javascript">
   <!--
   wie_gross();
   window.onResize = neuAufbau();
   //-->
</script>

In meinem Chrome-Derivat Browser "Iron" läuft das prima.
Im Firefox werden Befehle wie window.history.go(0); oder window.location.reload(); ignoriert. (ich habe die neueste Firefox Version auf meinem Windows 10 Rechner)
Wenn ich den alert anstelle des reload aktiviere, komm der alert.

Das Beispiel von der informatik.hu-berlin.de (siehe obiger Link) hat übrigend das gleiche Problem.

Hat jemand eine Idee?

Grüße betra

 

[mikdoe]

wozu möchte man neu laden bei einer größenänderung?

 

[betra]

damit das Hintergrundbild wieder das neue Fenster ausfüllt.
Bei einer vergrößerung des Fensters bekomme ich sonst weiße Balken rechts und links,
bei einer verkleinerung verschwindet der rechte Teil und muß gescrollt werden.

- - - Aktualisiert - - -

übrigens, MS Edge macht den refresh auch.

 

[kkapsner]

Weitestgehend kopiert von:

Das hättest du lieber bleiben lassen - das Skript ist schlecht geschrieben. Und das reload (was mein FF wunderbar macht) ist komplett unnötig: du kannst die Größenanpassung (fast) genauso im onresize machen, wie beim Seitenaufbau. Eigentlich ist das komplette JS unnötig, da man das komplett mit CSS machen kann.

 

[miniA4kuser]

Sollte doch mit reinem CSS funktionieren, oder?

html { 
  background: url(background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

 

[betra]

Danke, prima.
Ein kleines Java-Script war allerdings doch noch notwendig um die DIV-Höhe an die verschiedenen Fenstergrößen anzupassen. Der Content ist sehr schmal und sonst sieht man nur die oberen 10cm vom Hintergrundbild.
Grüße
Betra

 

[kkapsner]

Auch das kann man mit CSS regeln.

 

[betra]

kann ich einen winzigen Tip haben wie das mit CSS geht?

mein js sieht so aus:

<script language="JavaScript" type="text/javascript">
 <!--
 divobj = document.getElementById('wrap');
 document.getElementById('wrap').style.height = divobj.offsetWidth*0.714128 + 'px';
 //-->
</script>

ich multipliziere die Weite mit einem Wert um das Seitenverhältnis des Bildes zu behalten
und setze das als DIV höhe ein.

Grüße
betra

 

[kkapsner]

Kannst du mal einen Testlink geben (einen ohne JS), wo wir uns das live ansehen können? Ich habe den starken Verdacht, dass dein HTML nicht ideal aufgebaut ist.

 

[betra]

Haus Trappe, Waltrop, Hilberstraße 1
Hab nur diesen (ist aber mit JS)
Ich kann das JS auf Absprache allerdings mal abschalten.

 

[kkapsner]

Warum hast du überhaupt das #wrap-Element? Gib' doch deinem body das Hintergrundbild und deinem html und body ein height: 100% und width: 100% - dann solltest du gar kein JS mehr benötigen.

 

[betra]

Danke, ich habs probiert. Funktioniert auch prima. Bei meinem Bildschirm (1400x900) wird dann allerdings bei Fullscreen zuviel vom Bild unten abgeschnitten. Ich lass es jetzt so mit dem JS. Die Seite ist ja auch nicht für die Ewigkeit. Aber Danke für die Tips

 

[kkapsner]

Aber Danke für die Tips

Bitte - gern geschehen.