Mit CSS zwei Hintergründe

26. Juli 2005

Hi,

zuerst mal der Codeausschnitt als Überblick:



<style type="text/css">

      #back {

      background-image:url(images/Grünplan_Trans.gif); background-repeat:no-repeat;

      background-position:200px 300px;

      background-color:transparent;

      }

      #back_oben {

	  background-image:url(images/Grün_FS.gif); background-repeat:no-repeat;

	  background-position:100px 100px;

	  background-color:transparent;

	  }

    </style>

  </head>

  <body><div class="text_grau_mittel" id="back" id="back_oben">

</div>

[/php]

Dieser funktioniert so leider nicht, ich hatte aber gerne zwei Hintergründe mit CSS an einer Festen Position, wie verwirkliche ich das? Bei selfhtml finde ich irgendwie nichts dazu und per Google fand ich nur eine Möglichkeit, wo das Image einmal per HTML eingebunden wurde.

Danke schonmal.

etreu · 26. Juli 2005

Meine Idee:

2 absolute positionierte Div-Container.

Oder:

mach doch aus 2 Bildern eines.

Anmerkung: falsches Forum (gehört zum Webdesign)

geloescht_JesterDay · 26. Juli 2005

Dieser funktioniert so leider nicht, ich hatte aber gerne zwei Hintergründe mit CSS an einer Festen Position, wie verwirkliche ich das?

Ein Hintergrund kann, wie das der Artikel schon zum Audruck bringt, immer nur einen Hintergrund haben

Du könntest in ein Div mit einem Hintergrund ein anderes DIV mit einem 2ten Hintergrund legen, also so ung.


<div id="back">

  <div id="back_oben">

  </div>

</div>

Wenn sonst kein Inhalt da ist, muss aber eine Größe mitgegeben werden, sonst siehst du nicht viel davon.

26. Juli 2005

Danke, habe nun gerade ein anderes Problem dabei endeckt. Mein Firefox (1.0.4) stellt diesen Hintergrund irgendwie nicht da. Dachte bisher immer, alles auf SelfHTML ist w3c.

Gibt es eine Lösung, die in allen Browsern funktioniert? Der Opera Browser scheint dies ja ebenfalls nicht zu mögen und dass es überwiegend IE-Nutzer gibt, ist ja (zum Glück) nicht mehr der Fall.

Ach misst... ein paar Stunden arbeit umsonst.

kills · 26. Juli 2005

Danke, habe nun gerade ein anderes Problem dabei endeckt. Mein Firefox (1.0.4) stellt diesen Hintergrund irgendwie nicht da. Dachte bisher immer, alles auf SelfHTML ist w3c.

Nicht alles was W3C Konform ist geht in allen Browsern...

Hintergrundbilder werden nur dargestellt, wenn was im entsprechenden Element drinne ist.. sprich z.B.


<div id="abc"> </div>

Gruß,

Markus

26. Juli 2005

Nicht alles was W3C Konform ist geht in allen Browsern...

Leider, ich dachte nur, dass sich gerade Firefox bzw. Opera daran halten.

Hintergrundbilder werden nur dargestellt, wenn was im entsprechenden Element drinne ist.. sprich z.B.

Schon klar, hab oben beim Code nur sämtliches unnötige weggelassen (ist ne Menge drinnen ), da ich dachte es ist so übersichtlicher.

Mein Fehler, hätte ich vielleicht erwähnen sollen.

//Edit:

*lol* es lag am "Ü" in der Grafikbezeichnung...

jetzt gehts auch unterm Firefox.

kills · 26. Juli 2005

Leider, ich dachte nur, dass sich gerade Firefox bzw. Opera daran halten.

In 95% aller Fälle erhält man mit FF das erwartete Ergebnis. (Was auch vom Standard so gewollt ist)

Mit dem IE wird das meist zum Problem.

Gruß,

Markus

~Hawkeye~ · 26. Juli 2005

Nicht alles was W3C Konform ist geht in allen Browsern...

Hintergrundbilder werden nur dargestellt, wenn was im entsprechenden Element drinne ist.. sprich z.B.
<div id="abc"> </div>
Gruß,
Markus

Stimmt nicht ganz. Wenn im CSS eine Breite und Höhe des Bildes angegeben wurde, zeigt das auch Netscape, Opera, Firefox, IE, usw sauber an. Die Breite und Höhe muss nur mit der Größe des Bildes übereinstimmen.

FMG · 31. Juli 2005

per Google fand ich nur eine Möglichkeit, wo das Image einmal per HTML eingebunden wurde.

Richtig, z. B. so:

CSS:

p img { background:url(bildname.endung) no-repeat; }

HTML:

Anmelden

Mit CSS zwei Hintergründe

Empfohlene Beiträge

Gast

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Gast

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Gast

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte