Use CSS to get 1 image to span or float across multiple columns

New to CSS

[smanderson16]

I am used to working with tables but want to branch out and use more CSS. Right now I have a table with 3 rows and 2 columns. The 2nd to the last row is has a tan background color and the last row has a white background. I want to place a transparent image so it sits across / on top of both rows. Therefore, the top half of the image would take on the tan background and the bottom of the image would be white.

Dont laugh, but in the past I have broken the image apart into 2 images and placed the top half in one row and the bottom half in the other row. I know there has to be a better way!

Please help!

[smanderson16]

Have I not received a response because noone knows how to do this or because my question is confusing?

[createErrorMsg]

Have I not received a response because noone knows how to do this or because my question is confusing?

Most likely it's because it's a weekend. :)

I know there has to be a better way!

With a table, I'm not so sure. The only way to specify a single image in this way would be to absolutely position it on top of the table cells, which, amongst other things, would be hideously difficult to get positioned correctly, render any content in those two cells unselectable and unclickable, and may or may not allow the individual background colors to show through (depending on the file type).

I see two options for this. One is to do as you said and split the image in two. Another is to use the same image as a background for both cells, but position it within each cell so only the portion belonging there is visible.

The latter is done using the background-position property, which looks a little something like this...

background-position: L/R_VALUE T/B_VALUE;

...where L/R_VALUE is the percent or pixel position of the images upper left corner in from the left edge of the element, and T/B_VALUE is the percent or pixel position of the images upper left corner down from the top edge of the element. You can also use keywords for these - as in left, right, top, bottom and center - to hit the extremes.

In this case, let's say you have an image that is 600px wide and 400px tall, with the top 200px intended for the top cell and the bottom 200px intended for the bottom cell. You would set the same image as BG for both...

td#top {
background-image: url(images/my_image.gif);
}
td#bottom{
background-image: url(images/my_image.gif);
}

...then add to this the positioning. For the top cell, we want the image to sit right in the upper left corner, so that the bottom 200px are not visible...

td#top {
background-image: url(images/my_image.gif);
background-position:0 0;
}

For the bottom cell, we want to keep the image at the left edge but move it UP by 200px. Since the top value on background-position is a distance IN from the upper left corner, we actually need a negative value in order to move the top half of the image up and out of sight...

td#bottom{
background-image: url(images/my_image.gif);
background-position:0 -200px;
}

This should get things looking how you want. There's a bit of code simplification that we can do, however. Backgrounf-image and background-position can be combined into one shorthand background property...

td#top{
background: url(images/my_image.gif) 0 0px;
}
td#bottom{
background: url(images/my_image.gif) 0 -200px;
}

Hopefully that's enough to at least get you started.

cEM

[smanderson16]

I guess most people are not weird like I am and working on a weekend.

Anyway, thanks for the detailed response. It should be enough to get me started. I will give it a shot!

Any resources you would suggest to someone like me who is familiar with basic css and site development but wants to familiarize myself with advanced techniques? Any books or Websites?