[css] achtergrond achter achtergrond

[Verwijderd]

Ik probeer in CSS een achtergrond achter een achtergrond te plaatsen, maar dat lukt niet erg.

Ongeveer als dit:

|================|
| |
| |
| |
| |
| |
|================|
| |
| Deze loopt |
| dan achterlangs |
=================

Zoiets, kort geschetst.

Alvast bedankt voor de reacties !

[HunterPro]

Wat heb je zelf al bedacht, en waar heb je gezocht? Wat lukt je specifiek niet?

Overigens:

schets (de ~, ~en)
1 tekening die, of gemodelleerd werk dat slechts de hoofdlijnen van het onderwerp weergeeft, hetzij als ontwerp of als zelfstandige uiting

Een beetje ascii meuk is geen schets. En ik kan er ook zeer weinig uit opmaken.

[BasieP]

je text-plaatje is geheel onduidelijk, maar als het is wat ik denk dat het is dan kan zoiets otoch gewoon door 2 divjes over elkaar te plakken, en allebij een andere background-image property te geven?
door het onderste divje groter te maken dan de bovenste loopt de background er 'achterlangs'

[Rowanov]

BasieP schreef op donderdag 07 september 2006 @ 18:27:
je text-plaatje is geheel onduidelijk, maar als het is wat ik denk dat het is dan kan zoiets otoch gewoon door 2 divjes over elkaar te plakken, en allebij een andere background-image property te geven?
door het onderste divje groter te maken dan de bovenste loopt de background er 'achterlangs'

Twee block-level elementen die genest staan moeten dit al voor elkaar kunnen krijgen, er zijn niet altijd extra divs nodig

[Geert.H]

Wil je iets met transparantie? Wil je dat achtergrond twee te voor schijn laten komen zodra nummer 1 is afgelopen? In dat geval is het erg makkelijk, en vind ik dat je eerst zelf maar eens moet denken en met een paar suggesties komt.
(ok dan geef ik je toch een hint, body background icm div)

[Verwijderd]

Ghoekzema schreef op donderdag 07 september 2006 @ 18:44:
Wil je iets met transparantie? Wil je dat achtergrond twee te voor schijn laten komen zodra nummer 1 is afgelopen? In dat geval is het erg makkelijk, en vind ik dat je eerst zelf maar eens moet denken en met een paar suggesties komt.
(ok dan geef ik je toch een hint, body background icm div)

Dat is wat ik bedoel.

Dat had ik al geprobeerd, maar dan heb ik het probleem met repeat en centreren.
Het plaatje dat "afloopt" moet één keer geplaatst worden (no-repeat) en het andere plaatje loopt achterlangs door (repeat-y)

[Verwijderd]

Verwijderd schreef op vrijdag 08 september 2006 @ 11:00:

Dat had ik al geprobeerd, maar dan heb ik het probleem met repeat en centreren.
Het plaatje dat "afloopt" moet één keer geplaatst worden (no-repeat) en het andere plaatje loopt achterlangs door (repeat-y)

Wat is het probleem dan? No-repeat op het element wat 'boven' ligt, en repeat-y voor het element onder, wat je zelf ook al aangeeft.

[Geert.H]

Volgens mij moet het onderstaande wel werken, is niet al te moeilijk volgens mij. Heb je "uberhaupt al wel gezocht hoe je div's oid centreert? of hoe je plaatjes centreert met CSS? Geef eens aan wat je allemaal al hebt geprobeerd (is ook al eerder gevraagd).

Cascading Stylesheet:

body {
    background-repeat: repeat-y;
    background-position: top center;
    background-image: url("achtergrond.png");
    background-attachment:fixed;
}
div#plaatje dat afloopt {
    margin:auto;
    background-image: url("plaatje dat zich herhaalt.png");
    background-repeat: no-repeat;
    background-position: center top;
    /* en dan nog wat om het gedoe de goede breedte te geven, 
    goede hoogte enzo. */
}

[ Voor 35% gewijzigd door Geert.H op 08-09-2006 15:24 ]

[Rowanov]

Dat gedoe met hoogte en breedte zou je met een bottom-margin van #plaatje kunnen regelen, of door een element onder #plaatje te plaatsen zonder background-image. Al met al is dit heel basic en lijkt het me handig als je adh van een voorbeeld aanheeft waar het exact fout gaat. Deze pagina geeft aan wat je met alle background properties kunt en dat is heel handig en zo

[Verwijderd]

Ghoekzema schreef op vrijdag 08 september 2006 @ 15:14:
Volgens mij moet het onderstaande wel werken, is niet al te moeilijk volgens mij. Heb je "uberhaupt al wel gezocht hoe je div's oid centreert? of hoe je plaatjes centreert met CSS? Geef eens aan wat je allemaal al hebt geprobeerd (is ook al eerder gevraagd).

Cascading Stylesheet:

body {
    background-repeat: repeat-y;
    background-position: top center;
    background-image: url("achtergrond.png");
    background-attachment:fixed;
}
div#plaatje dat afloopt {
    margin:auto;
    background-image: url("plaatje dat zich herhaalt.png");
    background-repeat: no-repeat;
    background-position: center top;
    /* en dan nog wat om het gedoe de goede breedte te geven, 
    goede hoogte enzo. */
}

Het is met bovenstaande code gelukt, alleen in Internet Explorer heb ik een paar pixels verschil. Ik volg dat niet, want in firefox werkt het perfect! suggesties zijn welkom!

[Geert.H]

Zoek eens op google naar pixel + ie + ff , of iets in de trant van pixel probleem. Het is namelijk een veel voorkomend probleem. Ook hier op GoT zijn er verschillende topics over geweest.