MyBB.de Forum

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:
[attachment=8942]

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:
[attachment=8943]

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

Nabend ist gut. Hätte schon Moin sein können Smile

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

Die Lösung hat nur einen Nachteil, denn dieser wird auch nach unten gezogen in den Beiträgen. Langer Content = langes Bild (Hintergrund).

(04.01.2014, 11:10)Manuel schrieb: [ -> ]Nabend ist gut. Hätte schon Moin sein können

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

Moin moin

(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.

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.

Gobee129

Manuel

MrBrechreiz

Gobee129

modercol