/    Sign up×
Community /Pin to ProfileBookmark

Expanding background image in a table

Copy linkTweet thisAlerts:
Dec 18.2005

Hi everyone,

I’m having difficulty with background images in tables. I have a table with three cells- the first and third cells contain images about 20px wide. I want the middle cell to expand so that the whole table fits the width of the block it is in- thus allowing to be the right size on all browsers.

I’ve tried setting the background image of the middle cell to repeat so that the three images appear to be one- the two “end bits” in first and third cells and the middle segment in the second cell that connects them. No matter what I do, I can’t get it to work. If I set the background image for the whole table via CSS, even with border-collapse on the table, I get the background image poking out either side of the images in cells 1 and 3 by about 1px. If I set the background image of cell 2 and then type text into cell 2, it disappears.

Very frustrating! Does anyone have any experience with this?

to post a comment
HTML

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@ramakrishna_p2Dec 18.2005 — Try this code,

Your images height should be same to maintain middle td image to repeat horizontally. If right and left images height more than middle td image your middle td image also will repeat vertically which is not desirable. You must put your middle image as background image to repeat verticall to occupy the width of the table.

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="20"><table width="20" height="20" border="0" align="right" cellpadding="0" cellspacing="0">

<tr>

<td><img src="your image path" width="20" height="20"></td>

</tr>

</table></td>

<td width="100%"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td background="your image path">&nbsp;</td>

</tr>

</table></td>

<td width="20"><table width="20" height="20" border="0" align="right" cellpadding="0" cellspacing="0">

<tr>

<td><img src="your image path" width="20" height="20"></td>

</tr>

</table></td>

</tr>

</table>

</body>
Copy linkTweet thisAlerts:
@MoghauthorDec 18.2005 — Wow, that worked like a dream- thanks ramakrishna p!

The only modification I had to make was to set the outside table to the exact height I wanted (41 pixels) and then the inside table on the middle cell to height 100%. Without this the middle table background would only be as high as the text- with the modification, the table scaled to the full height thus showing the full background.

Many thanks there, that's been holding me up for weeks ?
Copy linkTweet thisAlerts:
@ramakrishna_p2Dec 18.2005 — No thanks Mogh,

The basic purpose of this forums is to exchange ideas among us.

What everybody does I did same thing. There are other friends on this forums who can minimize the code further to bring the html file size to down. I expect always intervention of my intellectual friends. So that I can learn from them how to write simple and minimum line of codes. Iam guilty of giving you so many lines of code. I request members of the forum to show other way to reduce my code further.
Copy linkTweet thisAlerts:
@MoghauthorDec 18.2005 — ^ Well the main thing is that it works!

Once I've learned enough HTML to know what I'm actually talking about, I'll be sure to feed my own experience back into the forums ?
×

Success!

Help @Mogh spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...