Jump to content
alphaboss

Placing an image on top of a background image within a table.

Recommended Posts

Hello everyone I am trying to place an image within the right hand table but the background image is still shown when I place the image in the right hand table of my website that I am working on I would like that part of the background image covered I have attached screenshots of the HTML code and the webpage that I am working on any help and solutions would be greatly appreciated thanks so very much in advance.

table.PNG

table for webpage.PNG

Share this post


Link to post
Share on other sites

That would only possibly happen when you use position: absolute; in that case, you would have to apply a position: property to both (background AND table elements) and change z-index: layer level so one is a higher than the other.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

I did change both position properties for background and table elements to absolute and set the z-index to number 2 for my table elements I have 2 table headers I want the image to go to the right side table header when I saved the file and refreshed my browser the image was on top of the text instead on the left side of my table here is the code I have for the table elements for CSS and HTML:

th {
    position: absolute;
    z-index: 2;
}

<table style="width:100%">
<tr>
<th><font size="4" color="navy">Have you just purchased a computer, printer, or WIFI router either individually or in combination of 2 or more items and don't know how or have no time to set it up? Let Alpha Boss do the setup for you in the comfort of your own home or small business, by clicking Contact at the bottom of this page. Providing fast reliable setup (45 minutes or less)of your purchased computer, printer, or WIFI router. Pricing is $50.00 for either individual or combination setup of 2 or more items.</font></th>
<th><img src="desktop.jpg" width="650" height="550"></th>
</tr>
</table>

Any solution to this problem would be greatly appreciated, thanks.

Share this post


Link to post
Share on other sites

It does not work like that. You set the z-index: level on the table NOT th, that should bring text AND desktop image to overlap background, IF the background element is how i imagine it to be, i.e a sibling element to the table. Else you need to show both background and table html and how they interact with each other.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×