CSS background-image Frage

Hansmaulwurf

u wot m8?

Registered: Apr 2005
Location: VBG
Posts: 5639

22.03.2011 - 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

Octocat!

Registered: Sep 2002
Location: St. Egyden
Posts: 1595

22.03.2011 - 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:

Bearbeitet von BooTes am 22.03.2011, 14:00 (Beispiel hinzugefügt)

kleinerChemiker

Here to stay

Registered: Feb 2002
Location: Wien
Posts: 4281

22.03.2011 - 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

Here to stay

Registered: Feb 2006
Location: Wien
Posts: 2334

22.03.2011 - 13:57

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

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

22.03.2011 - 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

u wot m8?

Registered: Apr 2005
Location: VBG
Posts: 5639

22.03.2011 - 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

Bearbeitet von Hansmaulwurf am 22.03.2011, 18:14

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

22.03.2011 - 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>

Hansmaulwurf u wot m8? Registered: Apr 2005 Location: VBG Posts: 5639	22.03.2011 - 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 Octocat! Registered: Sep 2002 Location: St. Egyden Posts: 1595	22.03.2011 - 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... Bearbeitet von BooTes am 22.03.2011, 14:00 (Beispiel hinzugefügt)
kleinerChemiker Here to stay Registered: Feb 2002 Location: Wien Posts: 4281	22.03.2011 - 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 Here to stay Registered: Feb 2006 Location: Wien Posts: 2334	22.03.2011 - 13:57 ich vermute er will irgendwas besonderes haben, aber ich hab seine Beschreibung nicht verstanden
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	22.03.2011 - 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 u wot m8? Registered: Apr 2005 Location: VBG Posts: 5639	22.03.2011 - 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 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 Bearbeitet von Hansmaulwurf am 22.03.2011, 18:14
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	22.03.2011 - 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>`

CSS background-image Frage

Forum Index > Software > Coding Stuff

Hansmaulwurf

BooTes

kleinerChemiker

meepmeep

watchout

Hansmaulwurf

watchout