Achtergrond tabel als voorgrond instellen

Status
Niet open voor verdere reacties.
S

sanma

Gebruiker
Lid geworden
11 dec 2008
Berichten
170
Hallo,

Ik heb als achtergrond van een cel een afbeelding ingesteld namelijk via:

HTML: 
<tr>
  <td style="background-image:url(header_bg.jpg)" width="104" height="98"></td>
</tr>

Dit werkt goed, ik heb nu over de gehele breedte van de cel een groene streep wat ook de bedoeling is. Nu wil ik echter ook mijn logo in deze cel plaatsen maar als ik dit doe dan loopt de groene lijn achter de afbeelding door als het ware of hij begint pas na mijn logo.

Ik zou graag willen dat de groene lijn zich over mijn logo heentrekt dus dat de groene lijn evengoed van links naar rechts loopt over de gehele breedte en ook over het logo heen.

Ben erg benieuwd of dit mogelijk is.
 
Ik denk niet dat het met achtergronden kan, maar je kan wel wat <img> tags gebruiken.
Hier een voorbeeldje:
HTML: 
<html>
<head>
<style type="text/css">
img#achtergrond{
position:absolute;
left:0px; /* x-as achtergrond */
top:0px; /* y-as achtergrond */
z-index:-1;
}
img#groenelijn{
position:absolute;
left:5px; /* x-as groene lijn */
top:30px; /* y-as groene lijn */
z-index:1;
}
</style>
</head>

<body>
<img src="jouwachtergrond.png" id="achtergrond" />
<img src="jouwgroenelijn.png" id="groenelijn" style="width:100%;" />
</body>
</html>
Dit zou moeten werken, je moet dit zelf maar in je tabel zetten.
 
Laatst bewerkt:
Hoi sanma,
Ik zit aan twee andere dingen te denken:
  • ofwel het logo als background-img gebruiken, en de groene lijn er in de tabel als voorgrond-img overheen zetten (dus precies omgekeerd als nu),
  • ofwel meteen het logo en de groene lijn in één img combineren, en dat naar behoefte als voorgrond- of als achtergrond-img in de cel zetten.
Maar het hangt er allemaal een beetje heel erg veel van af hoe het er precies uit ziet (of er bv. nog meer in die cel moet komen; wat er moet gebeuren als de cel mocht groeien, enz.), en daar heb ik geen idee van.

Met vriendelijke groet,
CSShunter
 
Hallo,

Het is uiteindelijk gelukt met het voorbeeld met de Z-index.

Heel erg bedankt!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan