?
Solved

Code for Width of HTML table including background image

Posted on 2012-09-17
5
Medium Priority
?
411 Views
Last Modified: 2012-09-17
HI

I have a table (yes a table) that has a background image.

I am looking for the HTML code to force the width of the table and the image to be the same width

Here's my current html code:

 
<table background="/images/stories/SKU_PNGs/daytona/daytona-specs-bg.png" border="0" height="674" id="daytonaMastertable" repeat="no-repeat" width="936">

Open in new window


At the moment, even though I declare no repeat, the image is starting to repeat on the right side.

So I figure if I force both the image and the width of the table to be the same size then that should hopefully fix the issue.

It could be a total HTML solution or it could include some css.

Thanks

Rowby
0
Comment
Question by:Rowby Goren
  • 3
  • 2
5 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 38407190
'repeat' is not a valid HTML attribute which is why it's not working.  You need to specify the background and it's properties in a CSS 'style'.

<table id="daytonaMastertable" border="0" height="674" width="936" style="background-image:url('/images/stories/SKU_PNGs/daytona/daytona-specs-bg.png'); background-repeat:no-repeat;">

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 38407229
Thanks,  Dave,

Ah I see.

Do I need to declare everything regarding the table's background image in the css, or just the no repeat.

Can you give me an example of the best way, to declare the background image in the css

1)  Name of image
2)  width of image (and height if necessary)
3)  The specific no repeat x & y.

I think that's it??

Assuming I do it in the css, I guess I would remove the image reference completely from the HTML for the table, and just keep the table id?  Yes, I know that's a "DUH" question.

Maybe also give me the resulting cleaned up HTML, just so I get it right.

Rowby
0
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 38407323
You can't declare the width and height of a background image.  This page http://www.w3schools.com/css/css_background.asp shows all the things that you can define for the background.  There are two more properties available in CSS3.  http://www.w3schools.com/css3/css3_backgrounds.asp
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 38407467
Thanks Dave.  Got it workin'!  The link did the trick!  :)
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 38407562
Good, glad to help.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question