CSS Bilder

The User

Wie kann ich mit CSS sich ein Bild unendlich oft wiederholen lassen?
Danke im Voraus, ich habe nur Sachen zu Hintergrundbildern gefunden.
The User

Marlo

meinst du eine gif Animation?
oder was unendlich oft wiederholen?

The User

oh sorry, nicht in der zeit, sondern auf der Fläche.
Also immer wieder das selbe Bild.

Marlo

ahh... jetzt verstehe ich.
Du willst eine Fläche wo ein Bild mehrfach nebeneinander angezeigt wird.
Das geht aber auch ohne CSS
Leg einfach eine Tabelle an

Code

<table style="text-align: left; width: 640px; height: 480px;"
background="dein_Bild.jpg">
<tbody>
<tr>
<td style="vertical-align: top;">


</td>
</tr>
</tbody>
</table>

Alles anzeigen

sejuma

Wenn sich das Bild auf die gesamt Seite beziehen soll, dann so:

Code

<body style="background-image: url(deinbackground.gif)">
Hier kommt der gesamte Seiteninhalt rein
</body>

Soll sich das in einem begrenzten Teil abspielen, dann nimm

Code

<div style="background-image: url(deinbackground.gif)">
Hier kommt der Div-Inhalt rein
</div>

DarkSyranus

Code

<style type="text/css">
  element
  {
    background-image: url(bild.jpg);
    background-repeat: repeat;
  }
</style>

Mit ist aber viel schöner *-*

Edit: Zu langsam

sejuma

DarkSyranus:
So geht's natürlich auch. Allerdings musst du dann noch einen Bezug zum Body oder zu einem Div herstellen.

topfblume

moin ...

The User:
Es funktioniert mit css nur als Hintergrundbild.

gruß ...

The User

und dann mach ich einfach <div style=element></div>, oder?
finds auch mit css schöner.
Danke an alle.

topfblume

moin ...

Zitat

und dann mach ich einfach <div style=element></div>, oder?

Was soll das bringen?

Zitat

finds auch mit css schöner.

Schöner als was?

gruß ...

sejuma

Es kommt darauf an, wie das mit den CSS-Angaben handhabst.

Variante 1: ausgelagerte CSS-Datei
CSS

Code

#hintergrunddiv {background-image: url(deinbackground.gif);}

HTML:

Code

<div id="hintergrunddiv">Inhalt</div>

Variante 2: CSS-Angaben innerhalb des Headbereichs:

Code

<style type="text/css">
  #hintergrunddiv
  {
    background-image: url(bild.jpg);
    background-repeat: repeat;
  }
</style>

HTML-Code wie bei Variante 1.

Variante 3: Style-Angaben direkt im HTML-Teil:
siehe mein Post von 20.36 Uhr.

Notfalls arbeite dich mal durch meine Sigantur

DarkSyranus

Code

<div style="background-image: url(image.jpg); background-repeat: repeat; height: 100px; width: 100px;"></div>

Height und Width anpassen.

Edit: Wieder zu langsam ...

The User

ich meinte eigentlich <div class=
aber funzt nicht, wie muss mans denn machen?
kenn mich nicht so aus in css

driver

class is das selbe wie id (jedenfalls bei der einbindung in html).

bei css hat dann id ein # vorne und class einen .

The User

Also gut das funktioniert.
Das background-repeat: repeat; kann man wohl auch weglassen.
Aber das Ding wiederholt sich jetzt nicht einfach auf dem ganzen Raum, sondern auf einem bestimmten, und ich kenne ja nicht die Browserfenstergröße
der Besucher.
Zweitens ist das Bild im Hintergrund, es soll jedoch alles, was davor kam überdecken, wie ein Bild, das ich vor den Rest setze.

Zitat von sejuma

Notfalls arbeite dich mal durch meine Sigantur

Hatte mich schon mal kurz reingelesen, beschäftige mich im Moment jedoch mehr mit PHP und C++.

Ich lass mal die Katze aus dem Sack:
Ich will eine Transparenz drüberlegen:
Bin bei greendestiny.de fündig geworden:

Code

<style>
#transparenz {
	position: absolute;
	top: 0px;
	z-index:100;
	left: 0px;
	background-color:#00FF00;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}
</style>

Alles anzeigen

Damit gehts dann ohne Graphik, wenn ich den div dann um den ganzen Inhalt lege, nur wird der Hintergrund nicht verfärbt, das mache ich dann manuell. (bzw. mit php )

Danke für eure Geduld und alles
The User

Tags