[Invision] Hintergrundbild fixieren

URL-Adresse des Forums:https://fantasy-anthologien.forumieren.com/forum
Rang/Funktion im Forum:Admin
Forenversion:Invision
Browser: egal
Persönliches CSS(Ja/Nein):
Templateänderungen(Ja/Nein): Nein


Hallo liebes Forumieren-Team,

ja, wahrscheinlich rollt ihr bei dem Problem die Augen, aber ich hab jetzt diverses aus alten Forumuieren Themen ausprobiert und es geht nicht so wie ich möchte.
Das oben genannte ist ein Projektforum (und gleichzeitig ein Testforum für mein richtiges Forum).

ich möchte gerne ein neues Forendesign erstellen und dazu auch ein Hintergrundbild einbringen.
Jetzt ist es aber so, dass sich das nicht so dahinlegt, wie ich das gerne hätte.

Das Bild ist folgendes, in dem Fall 1920x1440px (es ist aber egal ob ich das Bild breiter mache oder kleinere px Größen verwende, es passt nie wie es soll)



Im Forum sieht dass auf dem PC dann so aus (Feder viel zu groß, der oberere hellbraune Hintergrund ist weg, wenn ich es anders ausrichte, z.B. center center, dann fehlt der untere Teil der Feder).


Verwendet habe ich dieses Tutorial:
https://hilfe.forumieren.com/t38282-tutohintergrundbild-fur-verschiedene-auflosungen-uber-das-css-anpassen

Wenn ich den CSS Code im genannten Tutorial nicht einfüge, dann ist das Hintergrundbild nebeneinander doppelt.
Wie gesagt habe ich an diversen Bildgrößen rumgespielt, mal kleinere, mal breitere Bilder verwendet etc, aber es endet immer damit, dass es nicht passt.
Wenn ich den CSS Code aus dem Tutorial nicht verwende ist es doppelt und wenn ich das Bild breit genug wähle (um die Dopplung zu vermeiden) (ich glaub es war so 1920x3000 und die Feder ist dann immer noch kurioser Weise zu groß , d.h. er hat die neue Breite einfach nicht richtig mitgenommen in Bezug auf die Bildeinteilung), dann werden neben der zu großen Feder unschöne Balken über und unter dem Bild eingefügt wenn ich das Browserfenster kleiner ziehe und auch die Feder wandert dann in die Mitte hinter die Forenblöcke.

Die Tickbox, die öfter mal beim Bilder festlegen in anderen Beiträgen erwähnt wurde, sowie divese "Fixierungs"-CSS Codes habe ich probiert, haben aber nichts geändert.


Würde mich freuen Hilfe dazu zu erhalten, damit ich noch mit passenden Hintergrundbildern rumspielen kann, bis ich das passende gefunden habe. Dafür muss ich aber erstmal herausfinden, wie ich es fixiert in der angedachten "Raumaufteilung" in den Hintergrund bekomme.

Optimaler Weise soll es so ähnlich aussehen (in fixiert, sodass es sich automatisch je nach Fenstergröße mit anpasst):


Vielen Dank schon mal!

hallo

füge diesen Code hinzu

Code:

  body { background-size: 100% 105% !important;
background-attachment: unset !important;
 }


Hi,

danke für deine Rückmeldung, leider führt das nur wieder zu einer mehrfachen Dulpizierung des Bildes.
In Kombination mit dem CSS aus dem Tutorial, wird das Bild wie in obigem Screenshot 2 dargestellt.
Scheint also irgendwie keinen Einfluss zu haben der neue genannte Code.

Entfernen Sie die Codes, die Sie aus diesem Tutorial hinzugefügt haben, und lassen Sie nur den Code übrig, den ich Ihnen gegeben habe

oder füge dies hinzu

Code:

body {
    background-repeat: no-repeat; }

Hi,

ja, den CSS Tutorial Code hatte ich schon rausgenommen, hatte nur noch einmal mit getestet, ob es etwas in Kombination vielleicht etwas macht^^
Hab aber beim ersten Code auch noch einen Copy Paste Fehler gefunden und er tut jetzt auf jeden Fall was.
Die Feder ist jetzt sehr verzerrt, davon hab ich auch keinen sinnigen Screen machen können, ist aber noch auf der Page sichtbar.
https://fantasy-anthologien.forumieren.com/forum

Der zweite Code ist das Bild nicht verzerrt, wenn auch nicht füllend.


Ich nehme an einer der Hauptprobleme ist auch, dass die Bildmaße nicht optimal passen. Ich hatte ja (von diversen Supportthemen hier ausgegangen) 1920x1440px genommen, aber das scheint mir nicht passend. Gibt es dazu eine Empfehlung?

Mein idealer Ausgang wäre:
Gern wie im ersten Beitrag letzter Screen, unabhängig davon ob mein Browserfenster jetzt klein oder groß gezogen ist (Die Forengröße verändert sich ja auch nicht, zumindest in der Höhe, in der Breite gibt es ein leichtes seitliches Zusammenschieben der Tabelle, aber auch nur wenig)

Vielleicht gibts ja noch ein paar Ideen

Skouliki schrieb:hallo

füge diesen Code hinzu

Code:

  body { background-size: 100% 105% !important;
 }


Ändern Sie möglicherweise die Zahlen in diesem Code

lösche dies

Code:

background-attachment: unset !important;


Hi,

vielen Dank!
Ja, das sieht jetzt schon besser aus.

Was noch nicht ganz stimmt ist:
- Das Bild ist noch leicht verzerrt, weil es wohl nicht breit genug ist. Gibt es eine Größenempfehlung für die Hintergrundbilder in Bezug auf Seite-Breitenverhältnis, was üblicherweise den Laptops/Bildschirmen entspricht? Ich hab jetzt noch eins in einem Seitenverhältnis von 16:9 probiert, es zeigte sich aber zwischen 1920x1440 und 1920x1080 kein Unterschied bei der Feder, die blieb exakt gleich im Hintergrund.
Recht unverzerrt (allerdings nicht so scharf wie das original Bild) wird es, wenn ich bei den Zahlen einstelle:

Code:

body { background-size: 70% 100% !important;
 }

Allerdings doppelt sich das Bild dann wieder.
Gehe ich über 100% fallen Teile des Bildes raus.
- Das Bild versucht sich noch in Gänze in ein Fenster zu quetschen, wenn man das Fenster kleiner zieht. Da ich nicht davon ausgehe, dass jeder jederzeit meine Bildschirm-/Fenstergröße nutzt, wäre es dann (selbst wenn es wie in Punkt 1 scharf und unverzerrt ist) bei den meisten anderen krumm.


Ich wünsche schon einmal einen schönen Abend!

Auf meinem Bildschirm sieht es ok aus



Wenn Sie jetzt die Zahlen auf 70 % setzen, verdoppelt sich das Bild, weil Sie diesen Code gelöscht oder nie hinzugefügt haben

Code:

body {
    background-repeat: no-repeat; }


Wenn wir px verwenden, reagiert das Bild nicht auf alle Geräte, daher ist es besser, % zu verwenden, wenn es um die Hintergrundgröße geht

Jetzt können wir stattdessen eine maximale Breite hinzufügen

Code:

body { width:100% ; }

Dadurch wird die maximale Breite eines Elements definiert, was bedeutet, dass kein Element breiter als sein maximaler Breitenwert sein kann.

Das heißt, wenn ein Bild die maximale Breite von 800 Pixeln hat und auf einer Bildschirmgröße von nur 360 Pixeln gerendert wird, zeigt das Gerät aufgrund von Platzmangel nicht das vollständige Bild an.
Beispiel

Code:

body {
max-width: 100%;
width: 800px - gehe davon aus, dass dies die Standardgröße ist
}

Durch Definieren der maximalen Breite und Festlegen auf 100 % wird das 800-Pixel-Bild verkleinert, damit es in den Platz auf dem 360-Pixel-Gerät passt......Durch die Verwendung einer relativen Einheit (wie oben gezeigt) wird das Bild auf jedem Gerät mit weniger als 800 Pixel flüssig.

Wenn die Bildschirmgröße jedoch größer als 800 Pixel ist, wird das Bild nicht entsprechend vergrößert.... Dies beeinträchtigt die Reaktionsfähigkeit..... Hier greift die Eigenschaft „max-width“ zu kurz.

Hi,

wie im Post vorher geschrieben sieht es besser aus, aber ist eben immer noch leicht rechts-links verzerrt. D.h. es wird zu breit bei mir dargestellt und der Hintergrund sieht daher von der Qualität mäßig aus Außerdem schiebt sich das Bild zusammen oder zerrt sich auseinander, wenn ich die Browserfenstergröße ändere.

Wenn ich es auf 70% setze ist das Bild recht klar im Vollbild (ob jetzt 68% oder 72% besser wäre ist ja erstmal unerheblich da kann ich später noch mit rumspielen.)
Den Code mit dem "no-repeat" hab ich wieder eingetragen.
Wenn ich es jetzt auf 70% habe wird es nicht mehr wiederholt, füllt dann aber auch nicht mehr den Hintergrund aus.


Als code eingefügt ist jetzt:

Code:


  body { background-size: 70% 100% !important;
  background-repeat: no-repeat;
 }

Wenn ich noch das andere in den body einfüge (als Test) habe ich das da stehen:

Code:

  body {max-width: 100%;
width: 800px;
  background-size: 70% 100% !important;
  background-repeat: no-repeat;
 }

Das führt dazu, dass der Forenbody, also die Forenstruktur schmaler wird. Es hat aber keinen Einfluss auf das Hintergrundbild, egal ob 70% oder 100% bei "background-size" eingetragen.

Ich hatte auch einmal bei divseren Seiten nachgelesen, wie üblicherweise der CSS Code für dieses Problem geschrieben wird und er wird mit seinen Zeilen so angegeben wie bei dem Tutorial aus dem ersten Beitrag von mir.
Es scheint ja auch mal in Forumieren damit funktioniert zu haben, nur wieso jetzt nicht mehr eigentlich?

Ich hoffe, dass dazu noch eine Lösung gefunden werden kann, weil ich würde gerne die Forenstruktur meines Hauptforums schmaler ziehen (das momentane ist ja nur ein Projekt-/Testforum). Aber das sieht nicht gut aus, wenn einem auf 40% Restbildschirm nur leerer Hintergrund anschaut. Da Foren generell auf dem absteigenden Ast bezüglich der Populärität sind, würde ich es daher gerne ansprechender gestalten.

Ah, ich glaub ich habs.
Ich habe nochmal diverse Vorschläge aus dem Netz ausprobiert, auch mit deinen Hinweisen und einer scheint zu funktionieren.

Dieser hier:

Code:


 body {
      width: 100%;
      height: 100%;
      background-image: url('https://i.servimg.com/u/f77/16/55/61/14/hinter16.jpg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      background-attachment: fixed;
    }

Das Tutorial hatte den hier:

Code:

body {
background-attachment: fixed;
background-size: 100% 100% !important;
background-color: #FFFFFF;
background-image: url("https://i.servimg.com/u/f77/16/55/61/14/hinter11.jpg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% auto;
}

Das Bild ist jetzt nicht mehr links-rechts verzerrt und es verzerrt nicht wenn man das Browserfenster kleiner zieht.

Ich glaub das ist alles, was machbar ist, oder? Ich bin da ja eher unbedarft, was das Wissen dazu betrifft

Dann könnte ich jetzt nach einem richtigen Bild suchen gehen (das hier war ja nur ein Testballon, bis es soweit funktioniert )

Viele Grüße!

	Thema ist erledigt und wurde ins Archiv verschoben. Regeln des Forums der Foren