background image achter een andere background image

Status
Niet open voor verdere reacties.
D

De Mettes

Gebruiker
Lid geworden
29 mei 2007
Berichten
172
Dag iedereen,

Voor een site zou ik graag aan de linker kant een image plaatsen die zich herhaald tot aan de footer. Dit heb ik gedaan door een div te maken waar al de andere elementen inzitten. Dit werkt perfect.

Maar nu wil ik dat op de hoogte van de header een andere image komt. De image die herhaald wordt moet op deze hoogte niet zichtbaar zijn. Als ik een margin optie gebruik dan komt heel de site lager wat ik niet wil. Dus denk ik dat het best is dat ik de header image over de side image plaats. Ik heb dit geprobeerd met z-index maar dit werkte niet.

Heeft iemand een idee?

Mijn site staat hier en dan zie je grote cirkels links bovenaan en kleinere cirkels die naar beneden gaan. Deze grote cirkel zouden dus boven op kleine cirkels moeten komen.
 
ik heb je verhaal 3x gelezen, maar het is me wat onduidelijk. Kan je anders een voorbeeld geven met plaatjes? En waarom werkte z-index niet, dit plaats een bepaald element bovenop of onder een andere... (noot dat je dan wel position: absolute moet hebben)
 
Bij position: relative werkt z-index ook. Maar verder begrijp ik 't verhaal ook niet.
Ik heb wel gezien dat je boven het doctype nogal wat scripts hebt staan. Dat gaat gegarandeerd (grote) problemen opleveren. Boven het doctype mag helemaal niets staan, zelfs geen spatie (IE 6 verslikt zich al in 'n spatie daar).
 
In de bijlage zit een afbeelding om alles duidelijk te maken.

Image 1 wil ik in de linker bovenhoek van mijn site. Image 2 wil ik onder image 1 verticaal met repeat-y. Probleem dat ik nu heb is dat image2 over image1 komt. Dit is niet de bedoeling. Daarom dacht ik image1 z-index: 1 te geven en image2 z-index: 0 geven. Maar dit werkte niet.

Ik heb wel gezien dat je boven het doctype nogal wat scripts hebt staan. Dat gaat gegarandeerd (grote) problemen opleveren. Boven het doctype mag helemaal niets staan, zelfs geen spatie (IE 6 verslikt zich al in 'n spatie daar).
Klik om te vergroten...
Ik zal er eens naar kijken hoe ik het kan veranderen.
 

Bijlagen

  • voorbeeld.jpg
    voorbeeld.jpg
    14,5 KB · Weergaven: 39
Oh, dat bedoel je.

Nou, ik zou image 2 (de kleine) je background-image maken van je body, en image 1 (de grote) er met een <img> of <div> overheen gooien. Of, als je al een andere body-bg hebt, zoiets:
HTML: 
<div style='position: absolute; top:0px;left:0px; z-index:2;'>
   <img src='groot.png' />
</div>

<div style='position: absolute; top:0px;left:0px; z-index:1;
            height: 100%; width: 200px; background-image: url('klein.png');
            background-repeat: vertical;'>
</div>
of een dergelijke constructie. (btw, werkt height: 100% bij absolute? Ben t vergeten. Werkt t niet, doe dan 'relative' bij de 2e oid.)
 
Laatst bewerkt:
Inmiddels heeft Vegras al geantwoord. Maar omdat ik 't al heb getypt post ik 't toch maar. Als dat van Vegras werkt, bof je.

Het gaat mij niet lukken om hier iets zinnigs over te zeggen. Er is 'n aantal problemen.
Geen van mijn normale hulpmiddelen werkt. Dat betekent dat er iets grondig mis is in je code. Dat geeft trouwens ook de validator aan.
Ik kan op dit moment niet eens uitvogelen (althans niet zonder heel veel moeite) om welke twee afbeeldingen het gaat.
Er zit 'n ongelooflijke hoeveelheid css in je site. Ik kan me niet voorstellen dat dat allemaal nodig is. Het maakt het oplossen van 'n probleem ongelooflijk lastig.

Wat je zou kunnen doen om het in ieder geval mogelijk te maken het probleem te vinden (want in principe zou die z-index moeten werken):
* Je moet om te beginnen dat script enz. boven het doctype weghalen. Dat staat zelfs in 'n head. Scripts enz. moeten normaal genomen binnen de <head> staan. Dit kan echt de wildste fouten veroorzaken, inclusief 'n niet werkende z-index.
* z-index: 0 werkt niet foutloos in alle browsers. Beter is om gewoon 1 en hoger te nemen.
* Haal de fouten uit je html via http://validator.w3.org/
* En uit de css via http://jigsaw.w3.org/css-validator/

Als dat is gedaan, zouden in ieder geval mijn normale hulpprogramma's moeten werken. Dan zit er nog steeds 'n gigantische hoeveelheid css in, maar dan zou het probleem te vinden moeten zijn. Hopelijk.
Misschien dat 'n genie je code bekijkt en gelijk roept: "o, daar mist 'n komma", dat is natuurlijk ook prima, maar voor mij moeten eerst die fouten er even uit.
 
toch maar...

Aha,
Ik geloof dat ik 'm snap: alleen bij 1280x1024px of grotere resolutie wordt goed zichtbaar wat je bedoelt!

Heb je al eens geprobeerd de zich herhalende kleine cirkeltjes als background-img in de html te zetten, en dan de grote cirkels met no-repeat in de body?
Het enige is dat de transparantie roet in het eten gooit: maar dat is te verhelpen door in het bovenste plaatje de blauwe kleur en de kleurige streepjes van de bovenkant in te monteren.
Zie hier nieuw plaatje, zie hier resultaat in een testpagina, en zie broncode voor de verklaring. :)

Succes!
CSS-hunter

EDIT:
Ik moet duidelijk minder wegwandelen en meer aan page-refresh doen! :o
Al 3 tussengelegen berichten...
Maar toch maar op de bus gedaan, omdat het gebruik van een bg-image in de html ook wel eens ergens anders van pas kan komen. Dat scheelt dan weer een extra <div>. :D
@CSS-sanering: ja, van harte!
@Html-sanering: ja, het is nu een tweekoppig monster <head></head><head></head> :shocked:
 
Laatst bewerkt:
Ik zal eens proberen om het op te lossen met de side (kleine) image als background-image in de body en de andere image gewoon als img.

De site is met joomla gemaakt (waarschijnlijk al wel ontdekt?) en de template met artisteer2. Dus ik zal eens alles uitspitten en beter proberen te schrijven.

Al heel hart bedankt voor de hulp en ik zal verdere verbeteringen laten weten.
 
Eerst een gezocht naar het script boven de doctype. Dit was in de fout geplaatst (hoort bij de module van de navigatie en had het bij de index van de site gezet). Dus dit is opgelost

Vervolgens heb ik van de header 1 image gemaakt. Dus de gekleurde lijnen en de grote transparante bollen in elkaar gezet. Deze heb ik in de index als image toegevoegd. Vervolgens heb ik in de body div de side image gezet met repeat-y. Dit geeft het effect dat ik wil.

Voor de rest moet ik alles nog eens overlopen om te kijken wat er uit kan tot ik op een deftige site en css kom.

edit: had er niet op gelet maar de header image komt over mijn nav dus werkt mijn nav niet. Nu heb ik de header image in 3 stukken en deze naast elkaar teplaatst maar het lukt nog niet enkel als de nav lager komt dan de lengte van de linker image.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan