Mehrere Hintergrundbilder anordnen

[Ogre]

Grüß euch,

Ich habe mich jetzt recht flüchtig in CSS eingearbeitet und möchte gleichmal etwas schwierigeres ausprobieren, weis aber noch nicht wie sich das verwicklichen lässt.

Mal folgende Aufgabenstellung:
Ich habe zwei Hintergrundelemente - beides JPGs (x.jpg und y.jpg) - die ich auf dem Screen anordnen möchte. X.jpg soll 20 Pixel vom Oberen Rand und 20 Pixel vom linken Seitenrand fixiert werden, Y.jpg dagegen 300 Pixel vom Oberen und 300 Pixel vom linken Rand. Wenn es nur im ein einzelnes Bild geht, welches - als Hintergrundbild - festgelegt werden soll, dann benutze ich natürlich den background-position befehl...

...jetzt habe ich aber mehrere Grafiken die beliebig auf der Seite angeordnet werden müssen, wie gehe ich also vor?

Soweit ich CSS richtig verstanden habe bis jetzt, müsste ich den beiden <img> Tags im HTML bereich bestimmte "Bezeichnungen" geben, also Namen, und dann in der CSS-File angeben, dass diese beiden Objekte eine neue Eigenschaft bekommen - eben ihre Ausrichtung.

Wie stelle ich das an?


Danke im Vorraus,
Ogre

 

[Ogre]

Gleich noch etwas...

Ist es auch möglich solche beliebig platzierten Bilder mit so einer Repeat-Funktion zu versehen?

http://home.arcor.de/spellsource/show.jpg

Wäre zum Beispiel bei den "offenen" Enden recht passend, damit sich der Hintergrund je nach Inhalt verlängert...

 

[c2uk]

Geht es Dir jetzt um Hintergrundbilder, sprich Bilder, die sich innerhalb eines Bereiches auch wiederholen müssen oder einfach nur Bildern?

Für ersteres würde ich Dir die Arbeit mit Ebenen (<div>) empfehlen, diesen dann per position Attribut, top,left,bottom oder right eine Position, mit width und height eine Größe und mit background dann halt die Hintergrundgrafik z.B.

<div id="x">
   ....
</div>

<div id="y">
    ....
</div>

#x {
position:absolut;
top:20px;
left:20px;
width:150px;
height:150px;
background:url(x.jpg);
}
#y {
position:absolut;
top:300px;
left:300px;
width:150px;
height:150px;
background:url(y.jpg);
}

Nicht getestet, sollte aber so gehen...

Zweiteres könnte so ähnlich funktionieren, einfach die gewünschten Images innerhalb des <div> platzieren.

 

[Ogre]

Danke sehr, bin da auch drauf gekommen gerade

Is ne super sache...

Aber nun die Frage, wie das mit dem Repeat funktioniert.
Sagen wir ich möchte einen schön gestalteten Balken von oben nach unten durchs Bild laufen lassen... der "Balken" besteht dabei allerdings nur aus einer 1-Pixel-hohen Grafik, die nach unten hin immerwieder wiederholt wird - um Speicherplatz zu sparen.

Wie funktioniert das?

Schreib ich dann einfach in den HTML bereich:

<div id="Balken">
</div>

und in den CSS Bereich:

#Balken {

  height:100%;
  width: 20 px;
  background: url(balken.gif);

}

Oder wie das?

 

[Ogre]

Okay.. habs nun schon geschafft!

 

[c2uk]

So ganz würde ich das nicht machen. Zumal ich auch glaube, dass er mit height:100% erstmal nichts anfangen kann.

Zum Background, da kann man noch mehr schreiben, die Farbe, die Position und wie dieser wiederholt wird, entweder gar nicht (no-repeat), nur Zeilen (repeat-x) oder nur Spalten (repeat-y). Dass er komplett wiederholt wird (repeat) ist die Voreinstellung.

Beispiel:

background:#FFFFFF url(balken.gif) repeat-y;

Übrigens, die Grafik muss in diesem Fall im selben Verzeichnis sein wie die Datei bzw. wenn Du dann das CSS auslagerst, dann auch wie die seperate CSS Datei, also immer relativ zu dieser auch die Verweise setzen.

Falls Dir schon ein gewisses Layout vorschwebt, könntest das auch mal beschreiben, dann kann Dir sicher jemand eine passende CSS Lösung vorschlagen.

Edit: Irgendwie war ich wohl sehr langsam...

 

[Maik]

Achtung: da fehlen die e's ;-]

#x {
position:absolute;
top:20px;
left:20px;
width:150px;
height:150px;
background:url(x.jpg);
}
#y {
position:absolute;
top:300px;
left:300px;
width:150px;
height:150px;
background:url(y.jpg);
}

Mit background-repeat: repeat-y wird eine Hintergrundgrafik senkrecht wiederholt.

Mehr Infos gibt's bei selfHTML / CSS / Hintergrundfarben u. -bilder

 

[c2uk]

Achtung: da fehlen die e's ;-]

Da lebt man schon in England und vergisst trotzdem immer wieder dieses "silent" e am Wortende...