login  Naam:   Wachtwoord: 
Registreer je!
 Forum
Zoeken  Regels  Help
Categorieën > HTML & CSS

2 achtergrond plaatjes met CSS

JLT – 07/02/2012 12:03
Offline offline




PHP 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
  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
Daisycon - Verdien geld met uw website

FrankieC – 07/02/2012 12:28
Offline offline



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.

JLT – 07/02/2012 12:41
Offline offline



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

Pieter – 07/02/2012 13:49
Offline offline



Gouden medaille

Erelid
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.

JLT – 07/02/2012 14:43
Offline offline



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

Pieter – 07/02/2012 16:26
Offline offline



Gouden medaille

Erelid
En als je de achtergrond div een negatieve margin geeft?

JLT – 07/02/2012 16:47
Offline offline



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

Pieter – 07/02/2012 17:43
Offline offline



Gouden medaille

Erelid
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-2012 Sitemasters.be - Regels - Gehost door: Vircon - Laadtijd: 0.032s