Fragen und Antworten » Hilfe, mein Hintergrundbild verzieht sich

12.03.2019 22:05

Reinhold
#1 Hilfe, mein Hintergrundbild verzieht sich

Re

Hallo,

ich habe ein Hintergrundbild für die Kopfzeile erstellt, doch leider verzieht es sich bei jeder Änderung der Fensterbreite.

Könnt Ihr mir sagen, wie man es anstellt, dass sich die Höhe des Bildes an die jeweilige Breite anpasst?

Vielen Dank für Eure Hilfe!

Gruß, Reinhold

Board-Nr. 798758

Antworten

Beitrag melden

#2

13.03.2019 14:37 (zuletzt bearbeitet: 13.03.2019 14:42)

Mike48
#2 RE: Hilfe, mein Hintergrundbild verzieht sich

Mike48

Admin → Layout → Kopf- & Fußzeile → Foren Logo & Kopfzeile
Wizard aktivieren falls er deaktiviert ist.
Dummys für Bild und Titel eintragen damit die Kontainer eingefügt werden

Für jede Bildschirmgröße ein Logobild in die Galerie laden und im Script drauf verlincken.
Der Titel wird ins Bild gesetzt und kann im Script positioniert werden.
Man könnte es auch mit nur einem Bild machen, dem größten, 3840px, dann wird es aber auch immer geladen, auch bei ganz kleinen Bildschirmen. Dauert dann entsprechend lange.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<style>
  /* begin Header HG-Bilder */
  #forumlogo .logotext { /* Logotext ins Bild setzen  */
    position: absolute;
    top: 25%;
    left: 5%;
  }
  #thelogo {   /* Bilderrahmen entfernen */
    padding: 0;
  }
  #forumlogo { /* Raender entfernen */
    margin: 0;
    position: relative;
  }
 
</style>
<script>
  var tmp1 = screen.width;  // Bildschirmgroesse speichern
  switch (true) {  // Bildschirmgroesse auswerten
    case (tmp1 <= 360):
      $("#thelogo").attr("src","files.homepagemodules.de/b578865/bild-360-px.jpg"); // Bild 360px hochladen und einfügen
      break;
    case (tmp1 > 360 && tmp1 <= 1024):
      $("#thelogo").attr("src","files.homepagemodules.de/b578865/bild-1024-px.jpg"); // Bild 1024px hochladen und einfügen
      break;
    case (tmp1 > 1024 && tmp1 <= 1280):
      $("#thelogo").attr("src","files.homepagemodules.de/b578865/bild-1280-px.jpg"); // Bild 1280px hochladen und einfügen
      break;
    case (tmp1 > 1280 && tmp1 <= 1440):
      $("#thelogo").attr("src","files.homepagemodules.de/b578865/bild-1440-px.jpg"); // Bild 1440px hochladen und einfügen
      break;
    case (tmp1 > 1440 && tmp1 <= 1680):
      $("#thelogo").attr("src","files.homepagemodules.de/b578865/bild-1680-px.jpg"); // Bild 1680px hochladen und einfügen
      break;
    case (tmp1 > 1680 && tmp1 <= 1920):
      $("#thelogo").attr("src","files.homepagemodules.de/b578865/bild-1920-px.jpg"); // Bild 1920px hochladen und einfügen
      break;
    case (tmp1 > 1920 && tmp1 <= 2560):
      $("#thelogo").attr("src","files.homepagemodules.de/b578865/bild-2560-px.jpg"); // Bild 2560px hochladen und einfügen
      break;
    case (tmp1 > 2560):
      $("#thelogo").attr("src","files.homepagemodules.de/b578865/bild-3840-px.jpg"); // Bild 3840px hochladen und einfügen
      break;
    default:
      $("#thelogo").attr("src","files.homepagemodules.de/b578865/bild-default.jpg"); // Bild default hochladen und einfügen
      break;
  }
  $("#forumlogo .logotext h2").text("mein Logo Text");                          // Logo-Text ins Bild einfügen
 
  /* end Header HG-Bilder */
</script>
 