• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

2 Hintergrundbilder per CSS einfügen

S

Spyderman

Neues Mitglied
Hi Leute,
ich weiss nicht ob ich hier richtig bin, oder ob solch ein Prob schon mal besprochen wurde. Ich habe nichts dementsprechendes finden können.

Es geht darum, dass ich (als Anfänger) gerne 2 Hintergrundbilder mit CSS per "div" und "class oder id" einbinden möchte.

1. Bild 1 (bg_links.gif) links oben
2. Content mittig; position:top
2. Bild 2 (bg_rechts.gif) rechts unten

Mögliche Probleme:
- Der Content der einzelnen Seiten ist nicht immer gleich "hoch", das heisst, dass sich Bild 2 (rechts unten) je nach Inhalt der Seite mitverschieben sollte.


Ideen:
1. Die Hintergrundbilder können oder dürfen vom Body leicht überlagert werden.
2. Die Hintergrundbilder dürfen vom Body nicht überlagert werden.

Wie sollte solch ein möglicher Code (html und css) denn aussehen, dass dies funktioniert?

Wenn jemand Lust hat einem Anfänger mit verständlichen Angaben hier unter die Arme zu greifen, wäre ich sehr froh.

Besten Dank im voraus.
 
Werbung:
Einem Element kann man nur eine Hintergrundgrafik zuweisen.
Durch entsprechende Verschachtelungen kann man es aber so aussehen lassen, als wären es mehrere Grafiken, wie hier beschrieben: Zwei Hintergrundgrafiken zuweisen
In deinem Fall könntest du html, body und einen div nehmen.

Was die gleiche Höhe bei unterschiedlichem Inhalt betrifft, solltest du dir eine einheitliche Grafik basteln und diese per Faux Columns einbinden.
 
Werbung:
Hi,
also ich habe das mal versucht umzusetzen, kann aber nur einen Teilerfolg verzeichnen.
Bild 1 (links oben) habe ich hin bekommen (Testbild, bleibt von der Farbe und Form nicht so).
Bei Bild 2 (rechts unten) hapert es jedoch bereits wieder und ich weiss nicht mehr weiter.....:oops:
Das Ganze sieht in Firefox ja ganz ok. aus; im IE jedoch absolte schei....

Siehe: Nails World

Info: Bild 2 würde genau gleich aussehen; nur spiegelverkehrt.

Könntet Ihr mir vielleicht noch ein paar Tips mehr anhand des bestehenden HTML-Codes geben?

Ich wäre euch sehr dankbar.
 
Zuletzt bearbeitet:
ist zwar scjon länger her aber ich wollte auch mal schreiben :)
man kann auch mehrere hintergrundbilder mit mehreren css dateien machen

Beispiel:

beispiel.html
HTML: 
<head><title>Beispiel</title>
<link href="css1.css" type="text/css" rel="stylesheet" />
<link href="css2.css" type="text/css" rel="stylesheet" />

css1.css
Code: 
body {background-image: url(blablabla/bild.jpg)}

css2.css
Code: 
body {background-image: url(blablabla/bild2.jpg}
 
Werbung:
Das geht mit einem kleinen Trick:

Im CSS-Teil:
Code: 
#linkesBild {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1000;
}

#rechtesBild {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1000:
}

Im HTML-Teil:
Code: 
<div id="linkesBild">
  <img src="dein Pfad zum linken Bild" alt="irgendwas" />
</div>
<div id="rechtesBild>
  <img src="dein Pfad zum rechten Bild" alt="irgendwas" />
</div>

lascaux
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben