Hallo, Gast! (Registrieren)

Letzte Ankündigung: MyBB 1.8.37 veröffentlicht (04.11.23)


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
Forum Container & Hintergrund an verschiedene Auflösungen anpassen
#1
Nabend,

ich habe mich jetzt durch einige threads hier gelesen, aber irgendwie kam nie ein "problem mit verschiedenen auflösungen" thread zu einer Lösung.

Ich hoffe deshalb sehr, dass der support hier mir direkt helfen kann.

Ich benutze für mein Forum (www.marineford.com) ein hintergrund bild, hier ist der global.css code für Body

Code:
body {
    background: #000000 url(http://i.imgur.com/H7mRiTY.png);
    width: 1200px;
    background-repeat: no-repeat;
        
        background-attachment:fixed;
    text-align: left;
    line-height: 1.4;
    Margin: auto;
    padding: 50px;
    background-position:center top;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

und container:

Code:
#container {
    background: #006CA0 url(http://i.imgur.com/XpHdcHx.png);
    width: 95%;
    color: white;
    background-repeat: no-repeat;
    border: 1px solid black;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
}

Bei meinem hochauflösenden Bildschirm auch alles super, so sieht es aus:
   

man erkennt am rechten rand den kopf der figur, roten haare, augen, alles passt.

Bei meinem "eher steinzeit"-Laptop sieht das ganze deutlich anders aus:
   

Da ich den Hintergrund fixiert habe, ist nichts verschoben, dennoch ist die figur deutlich erkennbar abgeschnitten. Man sieht quasi nur noch die Nase rechts (auch wenn die Nase am fixierten richtigen Platz ist).

Ich würde es natürlich gerne so haben, dass auch auf schlechter aufgelösten Bildschirmen, die Figur komplett zu erkennen ist. Und ich bin nach ner Stunde rumprobieren jetzt auch ziemlich müde, denn kein code, den ich in der global.css probiert hab, hat dies bewerkstelligt.

Ich könnte natürlich die Breite (width: 1200px) kleiner machen, und dementsprechend das Hintergrundbild anpassen. Aber ist dies die einzige möglichkeit?

Vielen Danke für die Hilfe Smile
Zitieren
#2
Nabend ist gut. Hätte schon Moin sein können Smile

Probier mal die Lösung, die hier beschrieben wird.
Gruß Manuel
Bitte erst die Suche und die Doku benutzen.
Zitieren
#3
Die Lösung hat nur einen Nachteil, denn dieser wird auch nach unten gezogen in den Beiträgen. Langer Content = langes Bild (Hintergrund).
Mit freundlichen Grüßen

MrBrechreiz
Zitieren
#4
(04.01.2014, 12:10)Manuel schrieb: Nabend ist gut. Hätte schon Moin sein können Smile

Probier mal die Lösung, die hier beschrieben wird.

Moin moin Big Grin

(wenn ich hier in NRW alle mit Moin moin begrüße, sind die immer gleich gut gelaunt haha)

danke dir, das hat ein wenig geholfen, hab mit den html codes, die dort benutzt werden, ein wenig rumexperimentiert und jetzt einfach die width von body & container prozentual angepasst.

ich werde wohl später den hintergrund ein wenig verkleinern, die figuren nehmen doch recht viel platz weg, und bei laptops sieht das dann nicht so prima aus.
Zitieren
#5
Auf der genannten Seite solltest du auch unbedingt den Tipp #1 mit dem @media-query beachten.
background-size: cover streckt dein Bild bis zur Unkenntlichkeit bei großen Auflösungen.

Deshalb solltest du unterhalb noch sowas machen, damit das Bild nicht über seine Größe gestreckt wird:
Code:
@media screen and (min-width: *BREITE-DEINES-BILDES*px) {
  body {
    background-size: auto auto; /* Streckt das Bild nicht mehr und zeigt es in original Größe an */
  }
}
Eine zusätzliche Möglichkeit wäre noch, den blauen Hintergrund im Header zu entfernen, sodass man auf dem Laptop dann auch die Figur sieht.
Keinen Support per PN, eMail und Messenger
computerhartware.de
GIGA - Spielen geht immer!
Zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  CSS-Formular farblich an verschiedene Themes anpassen? Tintenklecks 10 3.145 26.01.2020, 02:00
Letzter Beitrag: SvePu
  Hintergrund Anpassen Watbube 3 1.841 07.03.2016, 18:09
Letzter Beitrag: MatthiasK
  Hintergrund #container als Grafik ändern? Licht 21 5.993 07.09.2014, 13:29
Letzter Beitrag: Koelner
  Verschiedene Hintergründe pro Forum Gobee129 2 2.053 26.01.2014, 16:17
Letzter Beitrag: Gobee129
  content lässt sich nicht mehr an container anpassen burningskies 6 2.226 03.05.2012, 17:33
Letzter Beitrag: burningskies