Teammitglieder online
Support-Box
Neue Beiträge seit dem letzten Besuch.
Textbausteine des MODERATIONSTOOL
AB > PFAD > GENERATOR
FORUM > PFAD > GENERATOR
Unterstützung Lösungs-Probleme
Auffällige
User
Der Runde
Tisch
HÄUFIG GESTELLTE FRAGEN
Regeln und nützliche Hinweise
Neueste Themen
» [Invision] Signatur wird nicht immer eingefügt
von Skouliki Gestern um 16:33

» [Invision] Editor über den Bildrand ziehbar + Schriftgrößenproblem
von Alastor Gestern um 14:38

» [Invision]  Schriftgröße Navigationsleiste, Links und Forenbeschreibungen
von Skouliki So 27 Okt 2024 - 13:29

» [Invision] Transparent Logohintergrund/Struktur
von Joost So 27 Okt 2024 - 12:58

» png wird im servimg in ein jpg umgewandelt
von Skouliki Mi 23 Okt 2024 - 20:26

» Passwort Vergessen (SilentHowl)
von Joost Do 17 Okt 2024 - 17:14

» [Invision] Hintergrundbild fixieren
von Skouliki Mo 14 Okt 2024 - 11:30

» Paßwort vergessen
von Joost So 13 Okt 2024 - 17:58

» Anti-Spam-Prüfung
von Hana19 Sa 12 Okt 2024 - 16:59

» Private Nachrichten bleiben im Postausgang hängen
von Skouliki Fr 11 Okt 2024 - 11:11

» [phpBB3] Mittelteil des Forums verschoben
von Eto Mo 7 Okt 2024 - 20:50

» [phpBB3] Farbpalette ändern
von Skouliki Mo 7 Okt 2024 - 10:08

» [Klassische Version] Account löschen
von Joost Sa 5 Okt 2024 - 21:05

» Chatbox einloggen nicht möglich
von Joost So 29 Sep 2024 - 8:01

» [phpBB2] Admin Passwort nicht korrekt
von Joost Do 26 Sep 2024 - 19:20

» Grid-Layout für alle Forumversionen verfügbar
von Joost Mi 18 Sep 2024 - 16:54

» [Klassische Version]  Gründer/Admin Passwort vergessen / Forum löschen
von Skouliki Di 17 Sep 2024 - 11:14

» Eigene Bildergalerie entfernen
von Skouliki Di 17 Sep 2024 - 11:13

Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Alastor in [Invision] Transparent Logohintergrund/Struktur
( 2 )


» Beitrag von Keks in [phpBB2] Unterforen Nebeneinander
( 1 )


» Beitrag von *Christina* in [phpBB3] Farbpalette ändern
( 1 )


» Beitrag von Skouliki in [phpBB3] Farbpalette ändern
( 1 )


» Beitrag von Eto in [phpBB3] Mittelteil des Forums verschoben
( 1 )


[Invision] Hintergrundbild fixieren

2 verfasser

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt [Invision] Hintergrundbild fixieren

Beitrag von Alastor Di 8 Okt 2024 - 21:55

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)

[Invision] Hintergrundbild fixieren Hinter11

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).
[Invision] Hintergrundbild fixieren Screen33

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.
[Invision] Hintergrundbild fixieren Screen34

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):
[Invision] Hintergrundbild fixieren X210

Vielen Dank schon mal!


Zuletzt von Alastor am Sa 12 Okt 2024 - 19:00 bearbeitet; insgesamt 1-mal bearbeitet
Alastor
Alastor
Meister
Meister

Beiträge : 170
Anmeldedatum : 14.04.13
keine
Mozilla Firefox Invision

Nach oben Nach unten

Erledigt Re: [Invision] Hintergrundbild fixieren

Beitrag von Skouliki Mi 9 Okt 2024 - 8:17

hallo

füge diesen Code hinzu

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

Weiblich Beiträge : 897
Anmeldedatum : 16.04.19
[Invision] Hintergrundbild fixieren Empty
Google Chrome PunBB

Nach oben Nach unten

Erledigt Re: [Invision] Hintergrundbild fixieren

Beitrag von Alastor Mi 9 Okt 2024 - 12:37

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.
Alastor
Alastor
Meister
Meister

Beiträge : 170
Anmeldedatum : 14.04.13
keine
Mozilla Firefox Invision

Nach oben Nach unten

Erledigt Re: [Invision] Hintergrundbild fixieren

Beitrag von Skouliki Mi 9 Okt 2024 - 13:40

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

Weiblich Beiträge : 897
Anmeldedatum : 16.04.19
[Invision] Hintergrundbild fixieren Empty
Google Chrome PunBB

Nach oben Nach unten

Erledigt Re: [Invision] Hintergrundbild fixieren

Beitrag von Skouliki Mi 9 Okt 2024 - 13:42

oder füge dies hinzu
Code:
body {
    background-repeat: no-repeat; }
Skouliki
Skouliki
Moderatorin
Moderatorin

Weiblich Beiträge : 897
Anmeldedatum : 16.04.19
[Invision] Hintergrundbild fixieren Empty
Google Chrome PunBB

Nach oben Nach unten

Erledigt Re: [Invision] Hintergrundbild fixieren

Beitrag von Alastor Mi 9 Okt 2024 - 14:06

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.
[Invision] Hintergrundbild fixieren Code_210

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) Smile

Vielleicht gibts ja noch ein paar Ideen Very Happy
Alastor
Alastor
Meister
Meister

Beiträge : 170
Anmeldedatum : 14.04.13
keine
Mozilla Firefox Invision

Nach oben Nach unten

Erledigt Re: [Invision] Hintergrundbild fixieren

Beitrag von Skouliki Do 10 Okt 2024 - 8:10

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;
Skouliki
Skouliki
Moderatorin
Moderatorin

Weiblich Beiträge : 897
Anmeldedatum : 16.04.19
[Invision] Hintergrundbild fixieren Empty
Google Chrome PunBB

Nach oben Nach unten

Erledigt Re: [Invision] Hintergrundbild fixieren

Beitrag von Alastor Do 10 Okt 2024 - 18:35

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! Smile
Alastor
Alastor
Meister
Meister

Beiträge : 170
Anmeldedatum : 14.04.13
keine
Mozilla Firefox Invision

Nach oben Nach unten

Erledigt Re: [Invision] Hintergrundbild fixieren

Beitrag von Skouliki Fr 11 Okt 2024 - 10:27

Auf meinem Bildschirm sieht es ok aus

[Invision] Hintergrundbild fixieren Scree106

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.
Skouliki
Skouliki
Moderatorin
Moderatorin

Weiblich Beiträge : 897
Anmeldedatum : 16.04.19
[Invision] Hintergrundbild fixieren Empty
Google Chrome PunBB

Nach oben Nach unten

Erledigt Re: [Invision] Hintergrundbild fixieren

Beitrag von Alastor Fr 11 Okt 2024 - 15:09

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 Very Happy 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 Very Happy 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.
[Invision] Hintergrundbild fixieren Y210

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. Smile
Alastor
Alastor
Meister
Meister

Beiträge : 170
Anmeldedatum : 14.04.13
keine
Mozilla Firefox Invision

Nach oben Nach unten

Erledigt Re: [Invision] Hintergrundbild fixieren

Beitrag von Alastor Fr 11 Okt 2024 - 15:27

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 Very Happy

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

Viele Grüße!
Alastor
Alastor
Meister
Meister

Beiträge : 170
Anmeldedatum : 14.04.13
keine
Mozilla Firefox Invision

Nach oben Nach unten

Erledigt Re: [Invision] Hintergrundbild fixieren

Beitrag von Skouliki Mo 14 Okt 2024 - 11:30

top

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

Weiblich Beiträge : 897
Anmeldedatum : 16.04.19
[Invision] Hintergrundbild fixieren Empty
Google Chrome PunBB

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten