Zwei Hintergrundbilder in einem <div>

[Fabian St.]

Hi!

Ich stehe gerade vor dem Problem, dass ich für ein <div> zwei Hintergrundbilder angeben muss (eines links, das zweite rechts), es jedoch nicht gebacken kriege. Das ganze soll so ausschauen:

+--------------------<div id="container">----------------+
|                                                        |
| Hintergrundbild1                      Hintergrundbild2 |
|                                                        |
+--------------------------------------------------------+

In meinem css-File habe ich bisher folgendes drin:

#container {
            background:url(../img/test.png) top left no-repeat;
            background:url(../img/bg-top-large-section.jpg) top right repeat-x;
           }

Das Problem dabei ist natürlich, dass die erste Notation durch die zweite überschrieben wird und dass ich ich das ganze über reines CSS lösen muss, da es sich hierbei um ein ergänzendes Stylesheet (type="alternate stylesheet") handelt, welches vom User mittels JavaScript bei Bedarf gewählt werden kann, sodass ich keine Eingriffe in den HTML-Code machen kann.

Jemand eine Idee?

Grüße,
Fabian St.

[Cheatah]

Hi,

Ich stehe gerade vor dem Problem, dass ich für ein <div> zwei Hintergrundbilder angeben muss (eines links, das zweite rechts), es jedoch nicht gebacken kriege.

das liegt daran, dass es nicht geht. Jedes Element kann jede Eigenschaft nur genau ein Mal besitzen - nicht mehr und nicht weniger.

#container {
            background:url(../img/test.png) top left no-repeat;
            background:url(../img/bg-top-large-section.jpg) top right repeat-x;
           }

Das letzte (gültige) überschreibt jedes vorherige.

Jemand eine Idee?

Zwei Hintergrundgrafiken => zwei Elemente.

Cheatah

[Fabian St.]

Hi Cheatah!

Ich stehe gerade vor dem Problem, dass ich für ein <div> zwei Hintergrundbilder angeben muss (eines links, das zweite rechts), es jedoch nicht gebacken kriege.

das liegt daran, dass es nicht geht. Jedes Element kann jede Eigenschaft nur genau ein Mal besitzen - nicht mehr und nicht weniger.

Leider :-( M.E. wäre es z.B. bei background-image doch sinnvoll zwei Angaben zuzulassen, wenn sich die Angaben von background-position unterscheiden...

Zwei Hintergrundgrafiken => zwei Elemente.

Ja, aber - wie gesagt - geht das in meinem Falle nicht, da nur das Stylesheet getauscht werden soll. Naja, muss ich mir wohl was anderes überlegen.

Grüße,
Fabian St.

[maz]

Wenn Die DIV Breite nicht variiert, kannst Du doch beide Grafiken zusammenbasteln und als eine ausgeben.

[Fabian St.]

Hi!

Wenn Die DIV Breite nicht variiert, kannst Du doch beide Grafiken zusammenbasteln und als eine ausgeben.

Um das geht es genau ;-) Einmal ist das <div> 750px breit, das andere mal 90%.

Grüße,
Fabian St.

[maz]

Um das geht es genau ;-) Einmal ist das <div> 750px breit, das andere mal 90%.

dasselbe DIV ist auf einer Seite 90% breit und auf einer anderen Seite 750px breit? Dann gib dem einen eine neue ID oder Klasse und gib dem fixen DIV das eine Hintergrundbild und dem anderen das andere.

[Ashura]

Hallo Fabian St..

Um das geht es genau ;-) Einmal ist das <div> 750px breit, das andere mal 90%.

Wie wäre es wenn du 2 verschiedene DIVs übereinander positionierst und somit beiden einen eigenen Hintergrund verpasst?

Gruß, Ashura

[Fabian St.]

Hi Ashura!

Um das geht es genau ;-) Einmal ist das <div> 750px breit, das andere mal 90%.

Wie wäre es wenn du 2 verschiedene DIVs übereinander positionierst und somit beiden einen eigenen Hintergrund verpasst?

Wäre u.U. eine Möglichkeit, aber auch hier muss ich in den HTML-Quelltext eingreifen und wie ich bereits einige Male erklärt habe, ist dies nicht möglich, da jediglich das Stylesheet ausgetauscht werden soll (es geht eben darum zu zeigen, wie leicht man eine Seite verändern kann, alleine indem man das CSS verändert).

Grüße,
Fabian St.

[Ashura]

Hallo Fabian St..

Wäre u.U. eine Möglichkeit, aber auch hier muss ich in den HTML-Quelltext eingreifen [...]

Und wenn du dies bereits vorher machst? Also bei deinem Standard-CSS display:none; auf den DIV angewendet.

Ansonsten muss ich dir sagen, dass du keine Dinge präsentieren kannst, die so nicht möglich sind.

Gruß, Ashura

[Fabian St.]

Hi Ashura!

Und wenn du dies bereits vorher machst? Also bei deinem Standard-CSS display:none; auf den DIV angewendet.

Ein Blind-<div> nur für Layout-Zwecke? Keine sehr schöne Idee. Aber ich habe mittlerweile eh eine Lösung gefunden: Die Grafik wird eben einfach nach rechts hin länger und je nach Breite abgeschnitten. Damit wird die Grafik zwar um 20kB größer, aber dafür schaut das ganze sehr ansehnlich aus :-)
Ein Live-Beispiel für das ganze (es ist ein Info-Referat, welches sich mit CSS beschäftigt) liegt hoffentlich am Ende der Woche vor. Dann könnt ihr euch auch ein Bild davon machen ;-)

Grüße,
Fabian St.

[Danny]

Hi Fabian,

Du bist ja echt ziemlich verbissen! ;) Einige wenige divs mehr für Layout-Zwecke sehe ich als unproblematisch und semantisch durchaus okay. Man sollte nur darauf achten, daß es nicht zu viele werden, damit am Ende keine sinnlose "div-Soup" dabei rauskommt. CSS-Zen-Garden z.B. verwenden ja auch einige leere div, damit man möglichst viele Möglichkeiten bei der Gestaltung hat.

MfG
Danny

[Cheatah]

Hi,

M.E. wäre es z.B. bei background-image doch sinnvoll zwei Angaben zuzulassen, wenn sich die Angaben von background-position unterscheiden...

das ist nach den Konzepten von CSS absolut unmöglich. Es müsste zwei unterschiedliche Eigenschaften geben, also z.B. background-2-image.

Cheatah