Hallo, Gast! (Registrieren)

Letzte Ankündigung: MyBB 1.8.38 veröffentlicht (30.04.24)


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
Bild als Hintergrund
#1
Ich habe heute den ganzen Tag hier im Forum gesucht und auch eine Menge gefunden und probiert. Ergebnis ich habe mir meine kompletten Einstellungen zerschossen. Glück im Unglück, hatte ein Backup :-)

Nun aber zu meiner Frage:

Ich habe mir ein Bild vorbereitet welches ich gern in den Bereich (siehe Anhang) als Hintergrund einbauen will.
Das Bild soll den gesamten Bereich ausfüllen. Die gösse des Bereiches soll dabei nicht geändert werden.

Bisher habe ich lediglich die Grafik des Logos umbenannt und ausgetauscht.

Kann  mir jemand (idiotensicher) erklären wie ich mein Problem lösen kann.
(Für alle die mir empfehlen google zu benutzen, danke schon mal im voraus.)

Ron


Angehängte Dateien Thumbnail(s)
   
Phil-Forum.org - das neue Philippinenforum
Zitieren
#2
Admin-CP > Templates & Style > Themes

Wähle das Stylesheet: global.css
Wähle das Element: #logo

Als "Hintergrund" gibst du folgendes ein:
Code:
url(./images/<DEIN_BILD>) #ABC
wobei #ABC der Farbwert ist, der ersatzweise oder zur restlichen Auffüllung benutzt wird.

Optional kannst du das Bild auch ausrichten oder wiederholen lassen:
Code:
url(./images/<DEIN_BILD>) top left repeat-x #FFF
wobei top/left auch mit einer Pixelangabe (20px) angegeben werden kann.

repeat-x: Das Bild wird auf x-Achse aneinander gehangen
repeat-y: Das Bild wird auf y-Achse aneinander gehangen
no-repeat: Das Bild wird nicht wiederholt
Ohne Angabe wird es standardmäßig in x und y für die gesamte Fläche aneinander gehangen.

[ExiTuS]
MyBB + innovative Themes:
NokiaPort.de Forum Nokia-Traditionsforum seit 2006.
Live Escape Game Forum Diskussionsplattform für Escape-Rooms.
Unlösbares Problem, Dilemma? -> das Nötel Smile
Zitieren
#3
Danke erstmal für die wirklich rasante Antwort :-)

Admin-CP > Templates & Style > Themes


Wähle das Stylesheet: global.css
Wähle das Element: #logo

Als "Hintergrund" gibst du folgendes ein:
Code:
url(./images/<DEIN_BILD>) #ABC

wobei #ABC der Farbwert ist, der ersatzweise oder zur restlichen Auffüllung benutzt wird.

hab ich gemacht, dann hatte ich das alte logo im Vordergrund. Muss ich doch erst los werden. aber wie?

Ok, no repeat ist was ich will. Aber das Bild soll den gesamten Bereich ausfüllen, ohne Ränder.
Gibt es keine Möglichkeit der "Auto-Anpassung" im Bereich logo?
Phil-Forum.org - das neue Philippinenforum
Zitieren
#4
Ein Bild hat natürlich eine fixe Größe in Pixel.
Wenn der Bereich, in dem das Bild angezeigt werden soll, größer ist, dann kann das Bild es nicht vollständig bedecken. Abhilfe schafft hier die CSS-Angabe von "width" und "height". Somit kann man das Bild sozusagen strecken.
(Auch wenn es nicht Sinn eines Bildes ist, irgendwie von willkürlichen Größenangaben verzerrt zu werden).

Also gibst du als zusätzliche Angabe im Stylesheet folgendes an:
Code:
width: 100%;
height: 100%;
Somit richtet sich das Bild zu 100% an die Größe des Elementes, das es ausfüllen soll.

Alternativ wäre auch folgende Möglichkeit, welche dasselbe ermöglicht. Allerdings erst ab Stylesheet-Version CSS3, welche alle aktuellen Browser beherrschen.
Code:
background-size: cover;

Am besten wäre ein Bild, das entweder von links nach rechts oder von oben nach unten symmetrisch ist und daher aneinander gereiht werden kann. Somit hat man eine Achse an der das Bild irgendwo endet und nimmt diese Farbe am Rand des Bildes als #ABC-Farbwert um den Rest auszufüllen, um eine Farb-Stufe zu vermeiden. Es hängt natürlich stark vom Bild ab, wie oder ob man das realisieren kann. Smile

[ExiTuS]
MyBB + innovative Themes:
NokiaPort.de Forum Nokia-Traditionsforum seit 2006.
Live Escape Game Forum Diskussionsplattform für Escape-Rooms.
Unlösbares Problem, Dilemma? -> das Nötel Smile
Zitieren
#5
super, hilft wirklich weiter.

auch wenn ich nerve. ich hab ja noch das logo, welches im Verzeichnis images liegt. was mach ich damit?
Phil-Forum.org - das neue Philippinenforum
Zitieren
#6
Ach, das eigentlich Logo als Bildchen möchtest du entfernen!?
Na dann gehst du im A-CP unter "Templates" > "Header Templates" > "header" und entfernst dort das <img>-Tag für das eigentliche Logo.

Im Original ist es das <img>-Tag für das Bild, umhüllt von einem <a>-Tag für den Link zur Startseite:
Code:
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>

[ExiTuS]
MyBB + innovative Themes:
NokiaPort.de Forum Nokia-Traditionsforum seit 2006.
Live Escape Game Forum Diskussionsplattform für Escape-Rooms.
Unlösbares Problem, Dilemma? -> das Nötel Smile
Zitieren
#7
Danke  Cake
Phil-Forum.org - das neue Philippinenforum
Zitieren
#8
hat alles (fast gut geklappt) :-)

nur, jetzt sind die icons portal, suche u.s.w. alle nach oben gerutscht.

???
Phil-Forum.org - das neue Philippinenforum
Zitieren
#9
Die Größe des Bereichs richtet sich natürlich nach seinem Inhalt. Ohne Logo, also ohne größeren Inhalt, schrumpft es auf die mindest kleinste Größe zusammen.
Um den Bereich zu vergrößern (also dein Hintergrundbild sichtbar zu machen), füge folgendes in #logo hinzu:
Code:
height: 100px
Mit dem Wert kannst du herumexperimentieren.
Ebenso könntest du es mit folgenden, relativen Angaben versuchen:
min-height: x%
max-height: x%

[ExiTuS]
MyBB + innovative Themes:
NokiaPort.de Forum Nokia-Traditionsforum seit 2006.
Live Escape Game Forum Diskussionsplattform für Escape-Rooms.
Unlösbares Problem, Dilemma? -> das Nötel Smile
Zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Video als Theme-Hintergrund möglich? Brubaker 14 4.111 06.11.2016, 13:43
Letzter Beitrag: MrBrechreiz
  Hintergrund #container als Grafik ändern? Licht 21 6.709 07.09.2014, 12:29
Letzter Beitrag: Koelner
  Grafik als Hintergrund Susanne 11 5.102 01.05.2013, 17:41
Letzter Beitrag: Trommler
  Zufälliges Hintergrund bild Rubin 4 3.204 01.04.2010, 19:17
Letzter Beitrag: frostschutz
  Hintergrund Bild Hintergrund css Big Smoke Sn 2 3.560 31.07.2008, 09:59
Letzter Beitrag: Big Smoke Sn