login  Naam:   Wachtwoord: 
Registreer je!
 Forum

2 achtergrond plaatjes met CSS

Offline JLT - 07/02/2012 12:03
Avatar van JLTPHP interesse Ik heb nu twee tutorials gevolgd zonder succes. Daarom de vraag hier.
Wat is de manier om 2 achtergrond plaatjes te kunnen gebruiken?

Wat ik nu heb
css code - Bekijk de code zonder highlighting - Klap code in 
  1. html { background-image:url('../images/plaatje1-bg.gif'); height: 100%; } 
  2. body { padding-top: 200px; margin-top: -200px; background:url('../images/plaatje2.png'); background-repeat: no-repeat; background-position:center; height: 100%;  }
  3. #container { position: relative; width: 900px; padding: 20px; height: 380px; background-color: #ffffff; margin-left: auto; margin-right: auto; margin-top:175px; z-index:2;  }


Het resultaat
Chrome = goed
Firefox = goed
IE7 t/m 9 = 2 achtergronden goed, maar de content in de container die eroverheen ligt is leeg. Terwijl dat niet zo is. Chrome en Firefox geven gewoon keurig de content weer.

Is dit een IE probleem? Hebben jullie enig idee wat een oplossing is voor dit probleem?

Hopelijk kan iemand mij verder helpen...

groet,
Jelte

7 antwoorden

Gesponsorde links
Offline FrankieC - 07/02/2012 12:28
Avatar van FrankieC Lid Hallo Jelte,

Waarschijnlijk vind je hier je antwoord wel: W3 Schools - CSS3 - achtergronden. Als je het praktijkvoorbeeld opent in verschillende browsers zie je vanzelf hoe het zit met de ondersteuning door browsers.
Offline JLT - 07/02/2012 12:41
Avatar van JLT PHP interesse Hoi Frankie,

Klopt alleen ik ben er vergeten bij te vertellen dat mijn website ook goed moet draaien in IE8 (dus zonder CSS3 ondersteuning). Dat maakt het ook een stuk lastiger (...zucht...)

Toevallig nog andere oplossingen (middels CSS2)?

Grt.
Jelte
Offline Pieter - 07/02/2012 13:49
Avatar van Pieter Gouden medaille

SEO guru		 Heb je online een voorbeeldje van je huidige code? Meerdere achtergronden is inderdaad enkel een CSS3 mogelijkheid.
Met CSS2 zal je waarschijnlijk nog een divje met achtergrond ervoor moeten plaatsen, maar dat hangt af van geval tot geval.
Offline JLT - 07/02/2012 14:43
Avatar van JLT PHP interesse Ik heb een een testsite online staan, maar deze kan ik niet tonen i.v.m. content dat ik liever nog niet deel met andere (lekker geheimzinnig he 

Ik heb het ook al een keer geprobeerd met twee divjes. Bijvoorbeeld:

<body>
<div id="achtergrond2"></div>
<div id="container">
Hier de content
</div>
</body>

Dan geef ik de body en de div 'achtergrond2' een achtergrond image mee. De achtergrond div op position: absolute; z-index: 1 ; en de container krijg position: relative; en z-index: 2 ; mee. Maar ik hou dan het zelfde probleem...
Offline Pieter - 07/02/2012 16:26
Avatar van Pieter Gouden medaille

SEO guru		 En als je de achtergrond div een negatieve margin geeft?
Offline JLT - 07/02/2012 16:47
Avatar van JLT PHP interesse Bedankt voor het meedenken allemaal.

Ik heb het werkend gekregen. Het probleem zat hem in een bestand dat ik in mijn CSS bestand inlaad om ronde hoeken te gebruiken in IE7 en 8. (http://code.google.com/p/curved-corner/). Deze had een z-index: 0 nodig en ik had hem op 2 staan vandaar dat mijn content verdween.

Mijn manier en de manier van een extra DIV werken dus gewoon. Sorry dat ik jullie heb laten meekijken naar een probleem dat eigenlijk geen probleem is...

groet,
Jelte
Offline Pieter - 07/02/2012 17:43
Avatar van Pieter Gouden medaille

SEO guru		 No problemo. Druk nog even deze post als opgelost aan, zodat ze uit de lijst van actieve topics verdwijnt. ;)
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.167s