Page 1 of 1
Hintergrundbild
Posted: Sat 24. Feb 2018, 11:04
by cheffchen
Hallo,
ich würde der Loginseite gern ein Hintergrundbild Spendieren und somit das doch eher lästige Grau weg bekommen
Die Frage ist jedoch wo kann ich das ändern, über das Panel selbst ja nicht direkt? (Zumindest hat das hinzufügen von dem CSS Code unter dem Punkt Whitelabel nichts gebracht.)
Jemand ne Idee?
Re: Hintergrundbild
Posted: Sat 24. Feb 2018, 14:40
by nikko
Doch funzt....
Code: Select all
body {
background:url(https://www.demopro.de/servertest.jpg);
}
Re: Hintergrundbild
Posted: Sat 24. Feb 2018, 15:06
by cheffchen
Hey,
danke für die Antwort, das hatte ich Inzwischen auch hinbekommen (war nur ein Schreibfehler)
Allerdings füllt er mir mit dem Background nicht den ganzen Bildschirm obwohl das Bild groß genug ist.
Habe ich über die ganze obere Seite (im Header) einen grauen breiten Strich.
Re: Hintergrundbild
Posted: Sat 24. Feb 2018, 15:36
by Tobi
CSS Baby
! CSS!
background-size: cover;
background-position: center;
https://www.w3schools.com/cssref/playit ... eval=cover
Re: Hintergrundbild
Posted: Sat 24. Feb 2018, 16:45
by cheffchen
Tobi wrote: ↑Sat 24. Feb 2018, 15:36
CSS Baby
! CSS!
Na das ist mir schon klar, und ich arbeite ja auch nicht das erste mal mit CSS aber...
Ich kann an befehlen nutzen was ich will, der graue Balken bleibt
Hab aber mal ein Screen gemacht damit man vielleicht besser weiß was ich genau meine.
https://pichost.net/image/OYRN
Re: Hintergrundbild
Posted: Sat 24. Feb 2018, 21:06
by Tobi
cheffchen wrote: ↑Sat 24. Feb 2018, 16:45
Hab aber mal ein Screen gemacht damit man vielleicht besser weiß was ich genau meine.
Jetzt weiss ich genauer was du meinst, aber leider kann ich das bei mir nicht nachstellen.
Bei mir fügt sich das Bild problemlos als Hintergund ein.
Gerne kannst du mir mal deine URL als PN schicken.
Dann werfe ich mal nen Blick drauf.
Re: Hintergrundbild [GELÖST]
Posted: Sun 25. Feb 2018, 15:04
by Tobi
Danke für die PN.
Jetzt habe ich den Unterschied gefunden.
Bei dir ist das Hintergrundbild dem Element <body> zugeordnet.
Nimm es dort raus und setze den Hintergrund von <body> auf "transparent".
Anschließend das Bild dem Element <html> zuordnen und voilá es passt.
Code: Select all
html{
background-image: url(https://gamingnewstime.de/wp-content/uploads/2017/04/ServerRoom.jpg);
background-size:cover;
background-position:center;
}
body{
background:transparent;
}
Wobei ich in deinem Fall das Bild als "Kachel" verwenden würde. Das kann man passend zurechtschneiden und dann übernimmt der Browser das zusammenfügen zu einem nahtlosen Hintergrund. Dadurch kann die Datei ein paar KB groß sein und der optische Eindruck ist derselbe, bzw. noch besser, da das Muster dann nicht gestreckt oder gestaucht wird was bei "Background-size:cover" natürlich der Fall ist.
Gute Anlaufstelle hierfür ist:
https://www.toptal.com/designers/subtlepatterns/
HINWEIS:
Ich sollte darauf hinweisen, dass das im Beitrag verwendete Bild nicht mir gehört. Es sieht halt gut & passend aus. Aus urherberrechtlichen Gründen sollte man auf eine Einbindung verzichten oder die Datei beim Stockmarket seines Vertrauens käuflich erwerben.
Re: Hintergrundbild
Posted: Sun 25. Feb 2018, 16:14
by cheffchen
Hey,
Vielen Dank für´s drüber schauen und dem Öffentlichen Posten.
einen angenehmen Sonntag noch.
Re: Hintergrundbild
Posted: Sun 25. Feb 2018, 16:26
by Tobi
Na gerne doch!