Hintergrund mit Bild

[Onkel]

Hallo zusammen,
ich würde gerne in einer HP die ich gerade mit html und CSS erstelle einen Hintergrund mit Bildern einfügen (siehe Beispiel). Wie mache ich das dieser auf den verschieden Monitorgrößen und Formaten richtig Dargestelt wird und welche Pixelgröße nehme ich am besten für den Kräftig grünen Bereich in dem die Inhalte stehen sollen?

Danke für die Hilfe im voraus
Onkel

[imgm=750]http://www.qpic.ws/images/4zr45380.jpg[/imgm]

[Helmut]

Wie mache ich das dieser auf den verschieden Monitorgrößen und Formaten richtig Dargestelt wird

wen Du das erreichen willst dafst Du nicht mit festen Vorgaben arbeiten, da heist es % statt absoluter Pixelangaben.

Oder aber du nimmst den kleinsten geneinsamen Nenner und lässt die Seite mit Maß x in der mitte erscheinen, die Hintergrundgrafik dann halt in 2 extra Spalten die den Rest füllen.

Allerdings ist die jetzige Farbwahl in meinen Augen nicht so prall, (in Bezug auf das offensichtliche Cowboy/Western Thema) Ich würde das ja eher so machen das Du oben links oder rechts ein einzelnes HG Bild einbaust, meinetwegen auch in Verbindung mit einem Header, dazu am Seitenende noch eine schönen Abschluss.

Cu Helmut

[skifan]

Wenn du rechts und links große Grafiken einfügst, hats du bei einer M-Auflösung von 1024*768 px kaum noch Platz für den Inhalt.

machen könntest du das mit dem Boxen-Model nach dieser Anleitung.

besser finde ich aber den Vorschlag von Helmut, das alles in einen header zu packen.

Solltest du aber doch drei Spalten verwenden, dann kannst du Hintergrundbilder nach dieser Anleitung auch scalieren,...ob das in jedem Browser funktioniert,...keine Ahnung...

Gruß HaJö

[Onkel]

Hallo,
ich ich stoße immer noch auf das gleiche Problem - welche Pixelmaße brauche ich -. Das erste Bild war nur zur Veranschaulichung. Mein Entwurf sieht so aus.

[imgm=750]http://www.qpic.ws/images/NCP01745.jpg[/imgm]

Welche Pixelmaße hat der Hintergrund und wie groß ist der hellere Bereich.



mfg

Onkel

[Beagle]

Die Breite des Hintergrundes ist die der Bildschirmauflösung, also zwischen 1024 und 1680, bei HD Bildschirmen 1920, immer abzüglich ca. 20-24 px für den Scrollbar, siehe WIKI

Der helle Bereich sollte so 800 - 960 px sein. Mit variablen Breiten kannst Du bei der Head Grafik nicht arbeiten, weil Du sie nicht skalieren kannst. Zumindest wäre das für dich recht kompliziert.

Hier gibts ein paar Beispiele für Code und Aussehen. Einbauen musst du deine eigenen Vorstellungen dann selber.

Beispiel 1
Beispiel 2
Beispiel 3
Beispiel 4, mit Grafik und fließender Breite


Kannst ja mal testen, ggf. musst Du Deine innere Seite mit

Code:

#wrapper {
  width : 940px;
  margin: 0px auto;
}

zentrieren. #wrapper wäre der Container der um den hellen Teil herum geht. kann man natürlich auch mit align: center, oder position formatieren

[skifan]

Welche Pixelmaße hat der Hintergrund...?


...ein Hintergrundbild wird im CSS nicht als image, sondern als,..ja wenn man so will, als bunte Farbe eingebunden.
D. h.: es gibt für Hintergrundbilder im WEB keine den Browser beeinflussenden Pixelmaße, die ev. einen Scrollbalken verlangen.

Siehe auch selfhtml

Gruß HaJö

[prm]

Löse dich mal von deiner einheitlichen Grafik, denn vermutlich wird nicht jede deiner Seiten gleich lang sein, weil sie unterschiedliche Inhalte hat. Aus funktionalen Gründen kann man einheitliche Grafiken nicht immer 1:1 ins Weblayout umsetzen, weil das eben zweierlei Themen sind.

An deiner Stelle würde ich die Seite in etwa so aufbauen:

Vom dunkelbraunen Bereich würde ich eine kleine Kachelgrafik anfertigen und diese dem body als Hintergrundgrafik zuweisen. Dazu findest du hier eine Anleitung.

Vom mittleren, hellen Bereich kannst du ebenfalls eine Kachelgrafik anfertigen. Einbindung wie oben, jedoch in einen horizontal zentrierten Div.
Den schattierten Randbereich erreichst du wie hier beschrieben.

Die obere Motivgrafik kannst du direkt als Image einbinden.

Eigne dir etwas Basiswissen über HTML und CSS an, damit du verstehst, wie beides zusammenhängt und funktioniert.