CSS background-image Frage

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css-background-image-frage_223051/page_1 - zur Vollversion wechseln!

Hansmaulwurf schrieb am 22.03.2011 um 13:38

Hiho.
Ich wollte wissen, ob es möglich ist, das ich zwei Hintergrundbilder kombiniere mit CSS. Das was ich erreichen will ist :
- Links oben ein Bild auf der Page im Hintergrund, wobei ich am Rand eine bestimmte Pattern hab
- Die (seamless) Pattern über den ganzen Hintergrund tilen.

Ich hab zwar ein oder zwei Blog-Einträge gefunden, aber das waren Lösungen die "nur bei manchen Browsern" funktionieren. Wenn es geht hätte ich es halt schon gern standard-konform, ansonsten muss ich eine andere Lösung finden, da ich davon nicht abweichen will.
Gibts irgendeine Möglichkeit, oder muss ich mir was anderes überlegen ?

Danke schonmal

BooTes schrieb am 22.03.2011 um 13:55

Laut Wikipedia werden multiple Hintergründe von allen modernen Browsern unterstützt, sogar vom IE9.

Einfach zwei URLs hintereinander angeben sollte den gewünschten Effekt bringen.

Code:

background:url([url]http://yourwebsite.com/images/image1.png[/url]) repeat-x, url([url]http://yourwebsite.com/images/image2.png[/url]) repeat;

Edit: vb Code verschandelt mein Beispiel, einfach die [ url ] und [ /url ] weglassen... :bash:

kleinerChemiker schrieb am 22.03.2011 um 13:57

Was vermutlich funktionieren könnte:
Du gibts dem <body> einen Background mit dem Pattern und legst oben ins Eck ein <div> mit dem Bild als Hintergrund.

meepmeep schrieb am 22.03.2011 um 13:57

ich vermute er will irgendwas besonderes haben, aber ich hab seine Beschreibung nicht verstanden

watchout schrieb am 22.03.2011 um 17:37

ich würd fast sagen er will etwas das ich nur als "border texture" bezeichnen könnte
Falls es das ist was du suchst, das ist nach meinem Stand nicht so einfach in css lösbar

Hansmaulwurf schrieb am 22.03.2011 um 18:09

Zitat von BooTes
Laut Wikipedia werden multiple Hintergründe von allen modernen Browsern unterstützt, sogar vom IE9.

Einfach zwei URLs hintereinander angeben sollte den gewünschten Effekt bringen.
Code:
background:url([url]http://yourwebsite.com/images/image1.png[/url]) repeat-x, url([url]http://yourwebsite.com/images/image2.png[/url]) repeat;
Edit: vb Code verschandelt mein Beispiel, einfach die [ url ] und [ /url ] weglassen...

Genau so bin ich es angegangen. Wenn beide mit Semikolon getrennt sind, nimmt er das letzte Bild bzw. den letzten Befehl. Wenn beide durch nen einfach Beistrich getrennt sind, dann hab ich nur meine Hintergrundfarbe und keines der beiden Bilder :confused:

P.s. Das Problem ist schon so simpel

edit: Nochmal, war doch sehr konfus.
Links oben soll ein Image sein im Hintergrund, ohne Repeat.
Das Bild hat am Rand einen Übergang zu einem Muster, dass dann im Hintergrund repeated werden soll. Und das Muster ist das zweite Image

watchout schrieb am 22.03.2011 um 18:41

Code:

<div style="background:url(image_repeat) top left repeat;">
<div style="background:url(image_norepeat) top left no-repeat;">
-tha content-
</div>
</div>