View Full Version : Tables/Background images

01-05-2007, 10:59 PM
I'm having troubles in producing the effect that I want. On my website, I have a table containing a background image (http://www.btccaction.co.uk/index_news_cell_2.gif) which houses the latest 10 news articles.

If one of those news headlines spans two lines, the table stretches and the table background image repeats.

Can anyone please explain to me how I might create an effect that 'stretches' the background image?

(You can see the wrong and current presentation here - www.btccaction.co.uk/testindex.php)

Thanks very much


01-05-2007, 11:48 PM
As best I know, there's no way to actually stretch a true background image. Besides, if you stretched the image vertically, it would look distorted and not nearly as pretty. However, you are not without options.

My advice would be to take the border image and break it into two pieces . . . a top and a bottom. Give the bottom piece extra-tall left and right sides. Then use CSS to attach the background image to the bottom of the bottom section, and the top of the top section. Your code might look something like this:

In <head>:

.newsbox {
width: 231px;

.news-head {
background-image: url(index_news_cell_2_top.gif);
background-position-y: top;
background-repeat: no-repeat;

.news-body {
background-image: url(index_news_cell_2_bottom.gif);
background-position-y: bottom;
background-repeat: no-repeat;

In <body>:

<div class="newsbox">
<div class="news-head">
... (your headline image/text would go here)
<div class="news-body">
... (all your news links would go here)

The "background-position-y" attribute sticks the background image to the top or bottom of whatever item has the background image.

I hope this is helpful!

01-05-2007, 11:58 PM
Background stretching via CSS wonít be available until the CSS3 Borders and Backgrounds Module (working draft) starts being implemented. You can create a fake stretched background using the image element, absolute positioning, and z-indexing, but that probably wonít work for your situation.

You can get the effect you want though by slicing the background into three images: top, middle, and bottom. You would apply those backgrounds to three nested elements with the content being in the innermost element. The top background would not repeat and would be on the middle element. The middle background would repeat vertically and be on the outermost element. The bottom background would not repeat and would be positioned at the bottom of the inner element. Note that this means that your background images will (A) have to be revised every time the width of the box changes and (B) will also have to be revised every time the pageís background color changes. (B) can be fixed by stacking the elements instead of nesting them, however.

If you donít care about Internet Explorer visuals, you can also use proprietary, experimental properties based on CSS3, like Mozillaís -moz-border-radius property, to get the rounded corner effect without any use of images. Other browsers will simply see square corners.

Was busy doing something else and didnít hit post so someone beat me.

01-06-2007, 12:05 AM
The "background-position-y" attribute sticks the background image to the top or bottom of whatever item has the background image.I think it should be noted that this property is proprietary to Microsoft and probably wonít work in other browsers. Itís actually redundant since the CSS2.1 background-position property does exactly the same thing.

01-06-2007, 12:20 AM
Oh, thank you for letting me know (and for letting the original poster, as well). I'll keep that in mind for the future.