Jump to content

Repeat Both Sides Of A Table Row Bg-Image..?


Recommended Posts

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..?

  • Like 1
Link to post
Share on other sites

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 by cyfer65
Link to post
Share on other sites

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 by dsonesuk
Link to post
Share on other sites

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 by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...