cyfer65 Posted October 7, 2011 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..? Link to comment Share on other sites More sharing options...
Drycodez Posted October 7, 2011 Share Posted October 7, 2011 You need to upload a description (image) of what you are trying 2 archieve! Link to comment Share on other sites More sharing options...
cyfer65 Posted October 7, 2011 Author Share Posted October 7, 2011 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..? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 7, 2011 Share Posted October 7, 2011 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. Link to comment Share on other sites More sharing options...
cyfer65 Posted October 7, 2011 Author Share Posted October 7, 2011 so the answer is no then..?I dont quite understand that last post..? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 7, 2011 Share Posted October 7, 2011 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.