[SOLVED] background img center in table

robertl · #1 (**permalink**) Sep 28th, 2007, 06:28

Hi, i have a background image for a table on my site. I would like for the background image to stay centered, but it remains aligned left.

here is the code for it:

table bgcolor="#000000" background="../images/bg/bg5.jpg" width="100%" height=100%" border="0" cellspacing="0" cellpadding=0"

How do I align this background image center?

thanks

L

Monie · #2 (**permalink**) Sep 28th, 2007, 08:07

It is more easier doing it in CSS.

Isn't this code will fill the entire table with repeating image?

Code: Select all

<table bgcolor="#000000"  background="../images/bg/bg5.jpg" width="100%" height=100%" border="0" cellspacing="0" cellpadding=0">

or do you mean like this:

Code: Select all

<table style="width: 100%" cellpadding="4" cellspacing="6">
  <tr>
     <td style="text-align: center">
        <img src="../images/bg/bg5.jpg" width="850" height="439" />
     </td>
  </tr>
</table>

Jack Franklin · #3 (**permalink**) Sep 28th, 2007, 15:09

I'm confused with what you are wanting to do. I think that you want your bg image to be centered, but the table to be aligned left?

I can't think of a html way. CSS would be the obvious choice and I'm still a little hesitant, I never use tables for layout, but I think this may be the required code:

Edit: Ok, I have a way. It's gonna require a bit more CSS and I'm not sure if this is the quickest or easiest way, but it does work.

Code: Select all

<head>
<style type="text/css">
.tablewrapper {
background-position: center;
background-image: url(logo1.jpg);
height: 800px;
width: 600px;
background-repeat: no-repeat;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<div class="tablewrapper">
<table width=600 height="800" cellpadding="2" border="1px solid black">
<tr><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr>
<tr><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr>
<tr><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr>
<tr><td>blah</td><td>blah</td><td>blah</td><td>blah</td></tr>
</table></div>
</body>

However, it does depend on the image. If it is a logo, you will need to make the image the same size as the table and edit the width and height of the table and the css, if your image is say, a blue and black striped bg, you can set it to repeat-y and it should repeat.

That worked for me.

Hopefully I have helped a bit.

Jack

robertl · #4 (**permalink**) Sep 28th, 2007, 19:56

Tried the above, maybe I'm not getting it. I think seeing the page will explain it better.

I have a table enclosing the entire page, so the whole page is a td basically. I am trying to make the table background an image that repeats down, but i need it to be the table background since that is what takes up the space.

here is the page, i'm sure that i am doing a terrible job explaining things.

http://kitchentablelegs.com/printing/index.html

the background currently is the bg of the outermost table, and it repeats of it's own accord. my problem is that I need it to be centered so that it is even on both sides of my main site/area.

sorry if im terribly confusing, or going about this in a terrible way. thanks for your help

Jack Franklin · #5 (**permalink**) Sep 28th, 2007, 21:13

Hmm. I thought I understood until I looked at the site. Now I have no idea! You want a background image in the td to run down the page and repeat, but it needs to be centered? From what I can see on your web page, it is.

This should work.

Code: Select all

.tdwithimage {
background-image: image.jpg;
background-position: center;
background-repeat: repeat-y;
}
 
<td class="tdwithimage">~all your stuff here~</td>

Sorry I can't be of more help - I'll keep trying though!

Jack

Yes? No?

robertl · #6 (**permalink**) Sep 28th, 2007, 21:22

Tried that but it didn't get it. I think I need the bg image to be for the entire table, not the td.

Jack Franklin · #7 (**permalink**) Sep 28th, 2007, 21:24

Well then apply the above class to the <table> tag.

You know the CSS must go in the <head> section or an external style sheet?

(Just checking :P)

I'm sure we shall get there eventually!

Jack

Monie · #8 (**permalink**) Sep 29th, 2007, 01:55

Quote:

Originally Posted by robertl

Tried that but it didn't get it. I think I need the bg image to be for the entire table, not the td.

Yeah,

I discover the problem man!
It's not your CSS, Its your image "bg5.jpg" width setting!

Check out what's your background image doing when I throw away the table on top of it!
I think you have to set the table width according to your image width so it fits perfectly inside the table width, otherwise, it will repeat, or if you turn off the repeat x or y, you'll get the background image to be at the left of your table (default value)

Hope that helps!

robertl · #9 (**permalink**) Sep 29th, 2007, 17:33

hell yeah! thank you, now i can finally move onto some other problem..

Monie · #10 (**permalink**) Oct 1st, 2007, 05:27

No problem! Good luck with your site..

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Align <li> in center? SOLVED	Jack Franklin	Web Page Design	4	Feb 18th, 2008 20:14
background image table properties	geyids	Web Page Design	3	Apr 18th, 2007 20:23
How to center a page without use of a table	pdk	Web Page Design	23	Jan 31st, 2007 11:28
center align text/background image	Lchad	Web Page Design	5	Dec 5th, 2006 10:40
Center slice table vertically	Legacy_Staff	Web Page Design	9	May 5th, 2006 18:48

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] background img center in table