Bild als Hintergrund - Druckversion

Bild als Hintergrund - Druckversion

+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Theme-Diskussionen (https://www.mybb.de/forum/forum-84.html)
+--- Thema: Bild als Hintergrund (/thread-33158.html)

Bild als Hintergrund - Ron66 - 16.02.2016

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

RE: Bild als Hintergrund - [ExiTuS] - 16.02.2016

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]

RE: Bild als Hintergrund - Ron66 - 16.02.2016

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?

RE: Bild als Hintergrund - [ExiTuS] - 16.02.2016

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]

RE: Bild als Hintergrund - Ron66 - 16.02.2016

super, hilft wirklich weiter.

auch wenn ich nerve. ich hab ja noch das logo, welches im Verzeichnis images liegt. was mach ich damit?

RE: Bild als Hintergrund - [ExiTuS] - 16.02.2016

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]

RE: Bild als Hintergrund - Ron66 - 16.02.2016

Danke Cake

RE: Bild als Hintergrund - Ron66 - 17.02.2016

hat alles (fast gut geklappt) :-)

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

???

RE: Bild als Hintergrund - [ExiTuS] - 17.02.2016

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]