need image to stretch to fit table cell
http://onlinescratchpad.co
- fair warning - the above link is to a religious site - please don't go if you're offended by such things
need the scroll to not repeat, but to stretch out long enough to go under all the words in the right hand cell
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
we had tried css, as so:
<style>
td.bgthis {
background-image: url(scroll_rs.gif);
background-position : top left;
backgRound-repeat: no-repeat;
}
</style>
if you have suggestions for making it stretch, that would be great
we had started playing with the table idea earlier, but due to the curves in the scroll, that may not work out
http://onlinescratchpad.co
You can't stretch a bg image in CSS, AFAIK.
However, there's an approach known as "sliding doors" where you'd take the image you have, crop off the left side (call that imR), go back to the original and crop off all the image except the left side (imL).
Now to make your scroll you'd put them next to each other. [imL][==============imR]
Now if imR is has position:fixed; right:0 (and is inside a position:relative div) then it hugs the right edge of the div. All you need to do is overlay the left edge image at the boundary of the left of the div. This is often used to make stretch fit tabs for site navigation (eg http://www.alistapart.com/
So you'd have a sliding door for the top and bott scrolls, the centre part looks like just plain background with a 1px border right and left.
PS: Do you need to be so apologetic about your site content? I'd have thought that folks would be professional enough about it ... have you had problems with this here??
The URL you posted doesn't work any more, but I thought I'd point out that you can set a cell background in CSS and have it only repeat horizontally:
.hstretchstyle { background-image: url("scroll_rs.gif"); background-repeat: repeat-x }
or only repeat vertically:
.vstretchstyle { background-image: url("scroll_rs.gif"); background-repeat: repeat-y }
then use <td class="hstretchstyle">
pbhj's suggestion of slicing the image up is a good one, I'd use a table (which is easier than just using CSS) and put the left slice in the first cell, the middle slice in the middle cell as the cell bacgkround, and the right slice in the third cell. Make the cell heights and widths the same pixel heights and widths as the images. Make the table border=0 and cellpadding=0 and cellspacing=0. Then put the text in the middle cell over the background image. I also find it's helpful to make the cell background of the left and right cell also use the middle slice in case the table stretches unexpectedly to prevent gaps in your scroll. Finally I've found the CSS I mentioned above can really help if you want something only to repeat horizontally or vertically.
Jordan
Hi there,
I have answered the same question here before...
Please check out the following link:
http:Q_21167200.html#12313
Business Accounts
Answer for Membership
by: lherrouPosted on 2005-10-03 at 05:36:36ID: 15005827
Stilett0,
That's an interesting idea, and it would be nice to implement properly. In the long run, one thing that would help is using CSS to do your page layout, rather than using tables, which were never intended for layout. A great example site of the power of CSS layout is http://www.csszengarden.co
One thing you'll need to address is that your cell is square, but your scroll is not, so you'll need to reformat your text flow to fit the shape of the scroll. You may be best off, if you stay with your table-based layout, using a new table for the interior of the cell where your text is... and break your scroll into 5 parts, a top, a bottom, L & R sides, and a tiling (repeating) interior.
top scroll sec.
----------------
l | |r
s | |s
i | |i
d | |d
e | |e
----------------
bottom sec.
I hope these comments help.
LHerrou