Webseiten-background links und rechts..

[botl1k3]

Hallo,

ich habe einen zentrierten Inhalt mit einer fixen breite.
D.h. je nach Auflösung des Betrachters ist links und rechts vom Inhalt unterschiedlich viel Freiraum.
Dieser Freiraum soll nun ein background mit repeat-x bekommen.
Die Schwierigkeit hierbei ist, dass es links und rechts _nicht_ der selbe sein soll, sondern ein verschiedener.
Im Moment habe ich das ganze mit einer table gelöst, was natürlich keine elegante Lösung des Problems ist.
In einem anderem Thread wurde mit bereits gesagt das es auch anders möglich ist, nur nicht wie...

Ich hoffe ihr könnt mir weiterhelfen!
Danke schonmal im Vorraus

greetz

[Glory]

Hallo,

ich habe einen zentrierten Inhalt mit einer fixen breite.
D.h. je nach Auflösung des Betrachters ist links und rechts vom Inhalt unterschiedlich viel Freiraum.

Ieehhh!

Dieser Freiraum soll nun ein background mit repeat-x bekommen.
Die Schwierigkeit hierbei ist, dass es links und rechts _nicht_ der selbe sein soll, sondern ein verschiedener.
Im Moment habe ich das ganze mit einer table gelöst, was natürlich keine elegante Lösung des Problems ist.

Hä? Tipps für Fragende

In einem anderem Thread wurde mit bereits gesagt das es auch anders möglich ist, nur nicht wie...

Welcher Thread? Warum bleibst du nicht in selbigem?

Ich hoffe ihr könnt mir weiterhelfen!
Danke schonmal im Vorraus

Dir wird wahrscheinlich besser zu helfen sein, wenn du in deinem alten Thread bleibst, weil du dort vermutlich schon Code o.ä. gepostet hast. Übrigens: es heißt "voraus" und nicht "vorraus".

[botl1k3]

Hi,

Ieehhh!

Geschmacksach' :P

Hä? Tipps für Fragende

Ich dachte es wäre klar geworden: Da der Inhalt zentriert ist (sagen wir width: 900px), entsteht links und rechts ja ein "leerer" Raum. Dieser soll einen background bekommen.
Normal könnte ich dem body ja einfach background-image: url(...) zuweisen.
Das will ich aber nicht, weil der Freiraum links, einen anderen Hintergrund haben soll, wie der Rechts.
Verstanden?

Welcher Thread? Warum bleibst du nicht in selbigem?

Weil es um ein komplett anderes Problem ging, wo ich dieses Problem in einem Zusammenhang nur angesprochen habe.

Übrigens: es heißt "voraus" und nicht "vorraus".

Danke :P

greetz

[Gunnar Bittersmann]

@@botl1k3:

ich habe einen zentrierten Inhalt mit einer fixen breite.

Das ist schlecht. Was ist, wenn das Anzeigefenster (der Viewport) beim Nutzer schmaler ist als deine in Zement gegossene Breite? Dann muss bei jeder Zeile horizontal hin- und hergescrollt werden – äußert nutzerunfreundlich.

D.h. je nach Auflösung des Betrachters ist links und rechts vom Inhalt unterschiedlich viel Freiraum.

Was hat ein Betrachter für eine Auflösung? Falls du die seines Monitors meinst, die spielt ÜBERHAUPT KEINE ROLLE, sondern allein die Viewportgröße. <leier alter="alt"/>

Dieser Freiraum soll nun ein background mit repeat-x bekommen.

Was ist mit der y-Richtung?

Live long and prosper,
Gunnar

[botl1k3]

Hi,

ich habe einen zentrierten Inhalt mit einer fixen breite.

Das ist schlecht.

Da hast du wohl Recht, doch ich schreibe die Seite für einen bekannten und der WILL es so, also mache ich es so..

Was hat ein Betrachter für eine Auflösung? Falls du die seines Monitors meinst, die spielt ÜBERHAUPT KEINE ROLLE, sondern allein die Viewportgröße.

Jap das ist mir schon klar.. habe es falsch ausgedrückt

Was ist mit der y-Richtung?

Wenn der background-image zu kurz ist, sieht man die background-color (Absicht).

greetz

[Gunnar Bittersmann]

@@botl1k3:

ich habe einen zentrierten Inhalt mit einer fixen breite.
Das ist schlecht.
Da hast du wohl Recht, doch ich schreibe die Seite für einen bekannten und der WILL es so, also mache ich es so..

Warum? Es geht doch besser: Einfach statt 'width' die Eigenschaft 'max-width' verwenden*, dann ist der Text auch in schmalen Viewports gut zu lesen.

Wenn der background-image zu kurz ist, sieht man die background-color (Absicht).

Kein Problem*:

html  
{  
 background: #048 url(background-left) repeat-x;  
 margin: 0;  
 padding: 0;  
}  
  
head /* irgendein Element muss ja das rechte Hintergrundbild haben ;-) */  
{  
 display: block;  
 background: url(background-right) repeat-x;  
 margin: 0 0 0 50%;  
 width: 50%;  
 height: 42px; /* Höhe von 'background-right' */  
}  
  
head *  
{  
 display: none;  
}  
  
#content  
{  
 background: #F00;  
 margin: -42px auto 0 auto; /* um Höhe von 'background-right' nach oben schieben */  
 max-width: 42em;  
 padding: 1em;  
}

Live long and prosper,
Gunnar

* Wir reden von Browsern mit mehr als nur rudimentalen CSS-Fähigkeiten. Auf Hacks für IEs hab ich keinen Bock.

[Inita_]

hi,

vllt dies koennte dir weiter helfen

http://inix.in.funpic.de/bgbody.html

LG,
Inita