CSS: Background Image strecken ?

[Zupi]

Hi.

Wie ihr vielleicht auch schon bemerkt habt, bin ich zwar in Richtung Programmieren (PHP) relativ fit, aber was das Design angeht (CSS, JavaScript) nicht gerade. Ich will folgendes machen:

Ich bin dabei, eine Seite für einen GameServer zu erstellen. Als Hintergrund möchte ich ein Bild. Ich habe einen bestimmten Bereich, der Links rausschaut, und rechts auch. In der Mitte Setzt ich dann mit z-index ein Content drauf.

Wie bekomm ich es hin, dass der das Bild strekt ?

Mit Background_repat:none; habe ich es ausgemacht, dass es wiederholt wird. Nun soll der Browser das Bild aber anzeigen, sodass man (wenn der conent weg wäre) das Bild einmal(!) komplett über die Seite sieht.

Es soll so gestrekt werden, dass der User es einmal komplett sieht, unabhängig von der Bildschirmgröße. Der Content darüber ist für mich kein Problem.

Habt ihr Ideen ?

Achso und welche Größe sollte das Bild habe ?

 

[bdt600]

Siehe http://www.ohne-css.gehts-gar.net/0055.php

 

[Zupi]

Erstmal Danke, für diese schnelle und hilfreichende Antwort. Es bestehen nur noch 2 Fragen:

1. Wie groß sollte das Bild sein, damit es für diese Methode, die du verlinkt hast, funktioniert?
2. Gibt es auch andere Methoden, oder ist das im Prinzip die einzigste ?

 

[threadi]

Die Größe ist technisch gesehen egal. Da die Grafik durch den Browser ggfs. gestreckt wird musst Du berücksichtigen, dass sie evtl. eine Mindestgröße der von dir angepeilten Mindestmaße für den Viewport hat. Wenn die Grafik z.B. nur 100x100 Pixel groß ist, der Viewport aber 990 Pixel breit ist, dann entstehen hässliche Pixelklumpen, die sicherlich nicht ansehnlich sind.

Für alle modernen Browser (inkl. IE>=9) kann man statt o.g. Möglichkeit auch die Eigenschaft

background-size: cover;

verwenden.

 

[Zupi]

Wie immer der scheiß Browser IE. Diesen könnte ich sowas von ...

Also würde es reichen, wenn ich (außer IE halt) die Eigenschaft auf cover setze ?

Mindestbreite also 990px ? Wie gesagt, mit Bild / Bildbearbeitung und sowas kenne ich mich net aus, eher mit dem reinen Programmieren

 

[threadi]

Die Mindestbreite war nur ein Beispiel. Der tatsächliche Wert hängt davon ab was Du als Zielgruppe hast, pauschal kann man das nicht sagen.

Wie gesagt kann der IE>=9 auch schon background-size. Die noch älteren IEs sollten ab nächsten Jahr ohnehin nicht mehr genutzt werden.