Scholieren.com forum

Scholieren.com forum (https://forum.scholieren.com/index.php)

- Software & Hardware (https://forum.scholieren.com/forumdisplay.php?f=20)

- - Html/css (https://forum.scholieren.com/showthread.php?t=577150)

Ik heb een klein probleem :(
Ik heb twee plaatsje 1 een transparante gif een een jpg plaatje (Met verschillende blauwtinten.)

Ik wil deze plaatjes boven elkaar hebben zodat de en deze twee plaatjes boven elkaar komen te liggen. Nu zie ik alleen nog het gif bestand.

De HTML:

Code:

<tr><td class="navmid" id="header" colspan="2"></td></tr>

Css code (alleen de relevante ;)):
In style.css dus extern

Code:

#header{background-image:url("images/header.gif");

background-attachment: scroll;}

.navmid{background-image:url("images/header-mid.jpg");

background-attachment: scroll; background-repeat:repeat-x;

padding: 5px 5px 5px 5px;vertical-align: top;height:99;}

Dus samengevat hoe krijg ik deze twee plaatjes in twee verschillende lagen. (En ik wil er geen jpg van maken. Dit omdat er dan gewoon een te grote kwaliteits verlies is (Deze twee vestanden zijn nu 2 kb en dat is mooi klein)

Zelf dacht ik met Z-INDEX:0; en Z-INDEX:1; alleen om rare redenen werkt dit bij mij niet. Nu

Je kunt blijkbaar geen twee achtergrondplaatjes over elkaar heen zetten... doe het dan gewoon zo:

<tr>
<td class="navmid" colspan="2"><img src="images/header.gif" alt="" /></td>
</tr>

Dan werkt 't wel :)

Of probeer anders eens zoiets:

<tr>
<td class="navmid" colspan="2"><div id="header"> </div></td>
</tr>

<div style="position:absolute; top:100px; left:100px; z-index:1"><img scr="plaatje1.jpg"></div>
<div style="position:absolute; top:100px; left:100px; z-index:2"><img scr="plaatje2.jpg"></div>

De style van een div, kan je in een stylesheet zetten.

Ach zo werkt het ook (Eerste voorbeeld van Marco) Moet je niet vergeten de padding op nul te zetten :rolleyes: ipv 10 :)