TomMoore
asked on
Fit background image to any size table cell - NEW!
This question is further to the question "How do i make the background image **stretch** to fit the table" asked by rsalunkhe at https://www.experts-exchange.com/questions/20526046/Fit-background-image-to-table-size.html
Using the accepted answer I have created my own working example of a table in a div tag that sits on top of a background which stretches to 100% of the entire page. This is at www.digitaldreaming.com.au/taras/stretch_test.htm
However, my issue is slightly different. I want to stretch an image to fit only the table cell it is within. So when a user resizes the window, the table (which itself may be within another table) resizes. At that point the background image of the cell must also resize.
Looking through the code, I wonder if it is possible to change the javascript to cause the image to resize to the edge of a cell.. but I am not sure how to do it or even if it is possible.
Using the accepted answer I have created my own working example of a table in a div tag that sits on top of a background which stretches to 100% of the entire page. This is at www.digitaldreaming.com.au/taras/stretch_test.htm
However, my issue is slightly different. I want to stretch an image to fit only the table cell it is within. So when a user resizes the window, the table (which itself may be within another table) resizes. At that point the background image of the cell must also resize.
Looking through the code, I wonder if it is possible to change the javascript to cause the image to resize to the edge of a cell.. but I am not sure how to do it or even if it is possible.
ASKER
Hi Sina,
I saw your comments on the previously referenced question, as well as the related question at https://www.experts-exchange.com/questions/20585159/Gradient-Help.html
Since posting the above queston, I have created a better working example with a proper 70% resize at www.digitaldreaming.com.au/taras/stretch_test2.htm
The only problem with this code is that both the BG image and the table above theBG are being positioned absolutely. I really want to be able to create tables within table, and then specify the cell that will be the location of the BG which stretches, currently I can do that.
I saw your comments on the previously referenced question, as well as the related question at https://www.experts-exchange.com/questions/20585159/Gradient-Help.html
Since posting the above queston, I have created a better working example with a proper 70% resize at www.digitaldreaming.com.au/taras/stretch_test2.htm
The only problem with this code is that both the BG image and the table above theBG are being positioned absolutely. I really want to be able to create tables within table, and then specify the cell that will be the location of the BG which stretches, currently I can do that.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Why not use CSS and put the background on the individual cell?
give the td and id
like <td id=cell>
then in your css you can do this:
#cell {
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: center center;
}
you also have options to make it repeat horizontally only or vertically, not repeat, etc.
this works especially well if you use a tileable pattern, if it's just an image that is not tileable and you want to resize it without losing quality, then you'd have to do some tricky js.
give the td and id
like <td id=cell>
then in your css you can do this:
#cell {
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: center center;
}
you also have options to make it repeat horizontally only or vertically, not repeat, etc.
this works especially well if you use a tileable pattern, if it's just an image that is not tileable and you want to resize it without losing quality, then you'd have to do some tricky js.
I realise it's been while, but...
Has anyone managed to re-work CirTap's code to work like TomMoore wanted? I'm having trouble making the changes CirTap recommends above. Help much appreciated!!
Has anyone managed to re-work CirTap's code to work like TomMoore wanted? I'm having trouble making the changes CirTap recommends above. Help much appreciated!!
sina
london