cyfer65 2 Posted October 7, 2011 Report Share Posted October 7, 2011 Is there a way to repeat only a small part of both the left & right sides of a background image in a table row..?I have a image that is ( 600 x 300 px) and want to center it as a background image in a table row that is ( 100% x 300 px) but I also need to repeat (1 x 300 px) from both of the ends of each side..Is there anyway to accomplish this..? 1 Quote Link to post Share on other sites
Drycodez 4 Posted October 7, 2011 Report Share Posted October 7, 2011 You need to upload a description (image) of what you are trying 2 archieve! Quote Link to post Share on other sites
cyfer65 2 Posted October 7, 2011 Author Report Share Posted October 7, 2011 (edited) I just want to repeat horizontally left & horizontally right ( 1px width by 300px height ) of both left and right end sides of a BG-Image..!! so your basically just horizontally extending both ends of a centered image to 100% of the browsers window width Is this possible at all..? Edited October 7, 2011 by cyfer65 Quote Link to post Share on other sites
dsonesuk 913 Posted October 7, 2011 Report Share Posted October 7, 2011 (edited) Bit messy but you could use position absolute elements 1px wide, 100% high, within a position: relative td cells (don't know if this will work for tr or td cells) with background position as required, and the use left:0;, right: 0;, they occupy no space and wont interfere with cell contents. Edit: repeat part of background, hoz, nope! me thinks no. Edited October 7, 2011 by dsonesuk Quote Link to post Share on other sites
cyfer65 2 Posted October 7, 2011 Author Report Share Posted October 7, 2011 so the answer is no then..?I dont quite understand that last post..? Quote Link to post Share on other sites
dsonesuk 913 Posted October 7, 2011 Report Share Posted October 7, 2011 (edited) Is this row tr, going to have 1 cell td within it, and when you say 1px by 300px part of image, you mean separate images of both right and left of centre bg image, if yes, then yes it can be done like <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title> <script type="text/javascript">/*<![CDATA[*//*---->*/ /*--*//*]]>*/</script> <style type="text/css"> .td_bg {height:300px;}.bg_img {position:relative; height:100%;}.centre_bg{width:100%; background:url(../middle.jpg) no-repeat center center; position:absolute; z-index:10; height:100%;}.left_bg{width:50%; background:url(../left_bg.jpg) repeat-x center center; position:absolute; left:0; z-index:5; height:100%;}.right_bg{width:50%; background:url(../right_bg.jpg) repeat-x center center; position:absolute; right:0; z-index:5; height:100%;}</style></head><body><table width="80%" border="1" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="3" class="td_bg"> <div class="bg_img"> <div class="left_bg"></div> <div class="right_bg"></div> <div class="centre_bg"></div> </div></td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr></table> </body></html> If i remember rightly, some browsers will show individual bg image for each cell instead of the whole row, when applying bg image to tr row. And of course you should note that tables should be used for showing tabular data, and not for web page layout. Edited October 7, 2011 by dsonesuk Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.