Code for Width of HTML table including background image

Posted on 2012-09-17
Last Modified: 2012-09-17

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.


Question by:Rowby Goren
    LVL 82

    Expert Comment

    by:Dave Baldwin
    '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

    LVL 9

    Author Comment

    by:Rowby Goren
    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.

    LVL 82

    Accepted Solution

    You can't declare the width and height of a background image.  This page shows all the things that you can define for the background.  There are two more properties available in CSS3.
    LVL 9

    Author Closing Comment

    by:Rowby Goren
    Thanks Dave.  Got it workin'!  The link did the trick!  :)
    LVL 82

    Expert Comment

    by:Dave Baldwin
    Good, glad to help.

    Featured Post

    What Is Threat Intelligence?

    Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

    Join & Write a Comment

    CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    745 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

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now