Background Image In Table Cell

I'm not sure what I'm doing wrong or missing here. This is the first time that I'm using an image as a background. I've made a table with a 100% width with 3 colums and 3 rows. The left and right table cells have been merged and the 3 middle rows are at a width of 938 pixels. I have cropped the images correctly. The right column lines up perfectly, but the left column does not line up like it's supposed to with the image. You can take a look at it by going to http://www.wattsconcepts.com/new
Here is the code below if anyone wants to take a look at it. Any help in solving this is greatly appreciated. I am using Dreamweaver CS5.5
Thank you for your time!
<!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>Watts Concepts - Kentucky Web Design - Harrodsburg, Kentucky</title>
<style type="text/css">
body {
          margin-left: 0px;
          margin-top: 0px;
          margin-right: 0px;
          margin-bottom: 0px;
          background-color: #000;
          background-image: url();
</style>
</head>
<body>
<table width="100%" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td rowspan="3" align="left" valign="top" background="images/left-index.jpg"> </td>
    <td width="938" align="center" valign="top"><img src="images/logo-index.jpg" width="938" height="172" /></td>
    <td rowspan="3" align="left" valign="top" background="images/right-index.jpg"> </td>
  </tr>
  <tr>
    <td align="center" valign="top"><img src="images/eye-index.jpg" width="938" height="296" alt="Reach Your Audience Today" /></td>
  </tr>
  <tr>
    <td align="center" valign="top"><img src="images/test-index.jpg" width="938" height="197" /></td>
  </tr>
</table>
</body>
</html>

Your HTML code should ideally be as follows:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Watts Concepts - Kentucky Web Design - Harrodsburg, Kentucky</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000;
</style>
</head>
<body>
<table width="938px" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="938" align="center" valign="top"><img src="images/logo-index.jpg" width="938" height="172" /></td>
  </tr>
  <tr>
    <td align="center" valign="top"><img src="images/eye-index.jpg" width="938" height="296" alt="Reach Your Audience Today" /></td>
  </tr>
  <tr>
    <td align="center" valign="top"><img src="images/test-index.jpg" width="938" height="197" /></td>
  </tr>
</table>
</body>
</html>
Also, you don't need 3 columns for this website. 1 column and 3 rows should do. Also, never use 100% for <table> width. It's bad practice as you're making your site fluid which will render your site to malfunction on some browsers
And you had the entire 3 sections as 1 image as your CSS body background-image. This is bad practice. Crop only what you want for each section, never give the entire merged site as 1 image.
Try the code I've given you above and it should work perfect.
A quick tip: Try learning and using DIV with pure CSS styling instead of tables. Tables are a thing of the past. You could just google it and you have tons of free resources on how to create a site using DIV. Also, there's a beautiful tutorial posted by one of our senior members here: http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt2.html that explains how to create HTML5 site with Pure CSS styling using DIV tags.
Cheers,
ST

Similar Messages

  • Stop Background Image in Table from Repeating

    Since CS4 has unfortunately removed the button for Background Image for tables, I found a neat work-around on the internet:  select the cell, then open the Tag Inspector panel, select the Attributes button and Show list view, and click inside "background" and use the folder icon to navigate to the background image.  However, I can't stop the image from repeating.  I've tried everything I can think of.  Can anyone help me?  No code responses, please.  Thanks!

    monelleny wrote:
    Can anyone help me?
    Yes.
    No code responses, please.  Thanks!
    Well, in that case, the answer is no.
    Quite honestly, if you're capable of searching for an answer on the internet, and using the Tag Inspector to add a background image, you should be capable of following simple instructions to handle CSS.
    To add a non-repeating background image to a table cell (or any element, for that matter), you use CSS. Create a CSS class like this in the head of the page:
    <style type="text/css">
    .background {
      background-image: url(images/bg.jpg);
      background-repeat: no-repeat;
    </style>
    Select the table cell, and then choose background from the Class menu in the Property inspector.

  • Displaying of image in table cells

    Hi,
    I have a requirement where i need to display an image in table cell editor. Can anyone please tell how to do this.
    Thank You,
    Madhavi

    Hi
    The link is related to the same code as well..
    First copy all your images into "project/src/mimes/components/<packagename>"
    1) First create a new column for image and insert Child "Image" UI Element
    2) Create a Context in a view in which you are using Image UI Element
    3) Value Node
    Name : Image
    Cardidality : 1..1
    4) create 2 Value Attributes
    4)a ImageAlt (Calculate property - true)
    4)b ImageSrc (Calculate property - true)
    5)Bind the properties of Image
    alt - Image.ImageAlt
    source - Image.ImageSrc
    6) in getImageSrc()
    //according to your condition use your image
    retrun "XX.gif"
    7) in getImageAlt()
    return "Image Not Available"
    Case 2 :
    1) Add a new String attribute to your existing context
    2) Right click on your table in RootUIElememntContainer
    3) Edit Sturcture Binding
    4) Select the context which you modified , Select next
    5) in the next step for the newly created attribute select imageUIElement as type
    If you want to use that in wdDoinit()
    bind the two string value attributes to alt and source properties of ImageUIElement and write the following code
    in doinit
    wdContext.currentContextElement.set<src>("img1.gif") ;
    wdContext.currentContextElement.set<alt>("Image not found") ;
    Best Regards
    Chaitanya.A

  • Add image to Table cell

    Hi All,
       Based on condition how can i add image to Table cell.

    Hi,
    Its very simple and straightforward.
    All you need to do is:
    1...Create a context(value attribute) of type string.
    2...I am assuming that you have created a table, and mapped its columns with a node.
    3...In the <i>TableCellEditor</i>  of your desired column, map the above context with the <i>imagesource</i> property.
    4...In the code, set the value of this context to the image name(eg: abc.gif), on satisfying of a condition.
    5...However, keep in mind to set the context value to some default blank image in the doinit() of the view, else, you will get a null pointer exception.
    I hope this solves your problem.
    Keep posting if you have any further queries.
    Regards,
    Hanoz

  • How can I put a background image into the cell of a table using Dreamweaver CC.

    I want to place an image in a table cell and then be able to place editable HTML in the same cell on top of image. I also have Dreamweaver CS6. I can't get either one to do it using solution I found searching on web. Please help ASAP. What am I doing wrong. Example code would be great. Thanks!

    No tables required for any of this.  You simply need a 3-column starter page. 
    In DW, go to File > New > Blank page > HTML. 
    Select a 3-column layout from the 3rd panel.
    Hit Create button.
    Learn to use CSS floats, margins and padding to align elements.  DO NOT use positioning.
    Start with & bookmark these links for future reference:
    CSS Box Model
    http://css-tricks.com/all-about-floats/
    CSS Float
    Floatutorial: Step by step CSS float tutorial
    CSS Margin
    CSS Padding
    Nancy O.

  • How to control background color of table cell in an html report?

    I am using Labview 6.1 to generate a report.  In that report there is a table created using the Append Numeric Table to Report VI.  I want to be able to programmatically control the background color of each cell in the table.  Also, how can I programmatically control the background color of the row and header cells of the same table.  I am also generating a second table in the same report using the Append Text Table to Report VI and I would like to programmatically control the background colors of the cells in that table as well.  Thanks.

    Hi epsilon-d...,
    i´m not sure if there is an ready to use function to do what you want, but you can enlarge the available function. Open the "Append Numeric Table to Report.vi" and go to the HTML Case. There you can see another vi which creates the html table. In the VI "HTML Report Table Row" you can add the option: bgcolor="your color" inside of the "TR" tag.
    Hope it helps.
    Mike

  • What's the best way to place images in table cells?

    I'm working on a basic tooling catalog/list using a table for all of the information.  One of the columns is for an image of the tool.  Is there a way to place each image in a cell and have it resized to fit the cell dimensions (including my text inset settings)?  I'm using CS4 and the images are all tiff files, although I also have psd files of each.  Any suggestions would be appreciated.

    Table cells don't adjust automatically except in the vertical direction when set to "at least" some dimension, and I suspect you don't really want that anyway. Keep in mind that column width is constant through the whole table, so fitting the cell to the largest image is going to give you a giant coumn width that isn't used for smaller product shots in the same table.
    What about making an image frame the size you want, and setting the fitting options to fit proportionally? Copy that frame and paste into the cell, then place the image in the frame.

  • Place image in table cell in pages for iOS 5

    Can I place an image into a table cell in pages for iphone? This would keep me from having to take my expensive MBA out on the dangerous (for the computer) jobsite.  It would change my life to be able to do this on the iphone as my reports require it.  As of yet I've found no way to do this.
    Thanks in advance for your help!
    ~CR

    Put the text cursor in the cell and use the regual Place command. The image will be placed as an inline graphic in the empty paragraph.

  • How to set background image in a cell?

    I am trying somethign that seems tricky to me...
    The image I am using I faded to a solid color on the bottom
    half. I set the background image to to left and NO REPEAT but when
    the cell grows with content and it stretched beyond the image it
    goes blank underneath. How do I set a background color without
    going over the background image?
    I need them both to be background because I want to use text
    over both.
    Any ideaS?

    Color goes UNDER the background image. Just set it.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "StarPilot06" <[email protected]> wrote in
    message
    news:eqqve6$341$[email protected]..
    >I am trying somethign that seems tricky to me...
    >
    > The image I am using I faded to a solid color on the
    bottom half. I set
    > the
    > background image to to left and NO REPEAT but when the
    cell grows with
    > content
    > and it stretched beyond the image it goes blank
    underneath. How do I set
    > a
    > background color without going over the background
    image?
    >
    > I need them both to be background because I want to use
    text over both.
    >
    > Any ideaS?
    >

  • Repeating background images in tables

    I am working on a web page with a background image in a
    table. I have also inserted a table inside this same table to
    include some text. When I preview this in Netscape/Firefox and
    increase the text size a couple of times from the browsers menu,
    the table with the image starts repeating as the text increases in
    size. I don't mind the text changes sizes, but is there a way to
    stop the table from repeating the background image? This is a
    problem since the repeating image looks terrible.

    On that page, change this -
    </head>
    to this -
    <style type="text/css">
    table.special { background-repeat:no-repeat; }
    </style>
    </head>
    and then change your table tag from this -
    <table width="100%" height="606" border="0" align="center"
    cellpadding="0"
    cellspacing="0">
    to this -
    <table width="100%" border="0" align="center"
    cellpadding="0"
    cellspacing="0" class="special">
    (there is no table height attribute - it's invalid HTML)
    > b, be too small, dependent upon which browser they are
    viewed in.
    Impossible. A background image will not change size in
    different browsers.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "chimesey" <[email protected]> wrote in
    message
    news:[email protected]...
    >
    quote:
    Originally posted by:
    Newsgroup User
    > Use CSS -
    >
    > table { background-repeat:no-repeat; }
    >
    > --
    > Murray --- ICQ 71997575
    > Adobe Community Expert
    > (If you *MUST* email me, don't LAUGH when you do so!)
    > ==================
    >
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    >
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    > ==================
    >
    > I am trying to do the same thing, and my bg images seem
    to either
    > a, repeat somewhat
    > or
    > b, be too small,
    > dependent upon which browser they are viewed in.
    >
    > I will try to use the code suggested above, but where
    exactly would I
    > insert
    > it?
    > This is the code for the 'table within the table'...
    >
    > <table width="100%" height="606" border="0"
    > align="center" cellpadding="0" cellspacing="0">
    > <tr>
    > <th width="35%" height="95"
    > scope="col"><h1>ten</h1></th>
    > <th width="26%"
    scope="col"><h1>year</h1></th>
    > <th width="39%"
    scope="col"><h1>plan</h1></th>
    > </tr>
    > <tr>
    > <td height="325"><table width="100%"
    height="266"
    > border="0" cellpadding="0" cellspacing="0">
    > <tr>
    > <th scope="col"> </th>
    > <th background="../smiths.jpg"
    > scope="col"> </th>
    > <th scope="col"> </th>
    > </tr>
    > </table> <p> </p>
    >
    >
    > Ta!
    >

  • Insert shape over image in table cell

    Want to use circles, ovals, lines with arrows to point to some part (text or image) of a cell in a table.
    Need to emphasize certain areas of graphics in a document used as a step by step type document.
    If I add the shape outside the table and then try to drag/drop on to the image in the cell, the entire cell jumps to a new empty cell.
    Can nod get image to appear over the image in the table cell.

    Hello,
    do you think about this, please have a look here: http://help.adobe.com/en_US/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7b86a .html.
    Another way, to add text over an image uses Nancy O.'s Demo here (I would prefer by using PS or similar):
    http://alt-web.com/DEMOS/CSS-Sold-Out-Text-over-image.shtml
    Hans-Günter

  • IPhone SDK: Add background Image to Tabel cell

    Hi all,
    I am trying to add a image to the UITableViewCell. For some reason I could not see the image when I called *cell.backgroundView addSubview:imageView*. But if I changed the code to *cell.contentView addSubview:imageView*, I could see the image.
    Anyone has idea why?
    Thanks in advance.
    --------------------Here is my code
    CGRect rect;
    rect = CGRectMake(0.0, 0.0, 320.0, ROW_HEIGHT);
    UITableViewCell *cell = [[[UITableViewCell alloc] initWithFrame:rect reuseIdentifier:identifier] autorelease];
    UIImage *image = [[UIImage imageNamed:@"test.png"] retain];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    imageView.image = image;
    imageView.opaque = YES;
    [cell.backgroundView addSubview:imageView];
    [imageView release];

    hi, as far as i know, the property backgroundView does not contain a view at all. If you want to use it, you have to assign a UIView (or subclass) to it.
    So you may set the image as the cell's backgroundView with
    call.backgroundView = imageView;
    or you create a UIView, set it as backgroundView and add the image as subview of the newly created UIView;
    cell.backgroundView = [[UIView alloc] initWithFrame:CGRectZero];
    [cell.backgroundView adSubView:imageView];

  • How do I get rid of white space on one side of image in table cell?

    I'm making a disjointed rollover and when ever I add images it creates too much white space to the right of the cell.  How can I make the picture fit, so space is not wasted?  See image sample with red arrows where I want to remove space.  I've removed the width size from my table, hoping it would "spring to shape" around the images, but no go.

    HTML:
    Cellpadding="0"
    Cellspacing="0"
    CSS:
    table {border-collapse: collapse}
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb

  • Images in Table cell

    HI,
    I have to display different images in a SAP .Net tabe control cell depends on the field values from a database. I set the Tabel cell editor property to "Image Instance" and programatically assign the relative path of the image "web resourcesimagesxxx.gif" according to the database field values. I can see at runtime the web source have correct URL to the image source but the image is not getting displayed on the iView. What am I doing wrong?? I follow this article to do the code part
    https://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/library/nw/dotnet/pdk for .net faq - .net controls.faq
    Please help.
    thanks

    Thanks for the reply guys,
    Here is the code; I'm not using server "itemDtaBound"
    I set the field type as "image instance" at design time and at runtime after reading the data assign the graphics to the control according to the value returned from the database at the Page_Load
    I only took the relevant portion
            Dim sOrderByField As String = ""
            Dim sqlDate As String = FormatDBDateTimeSQL(Format(Now, "MM/dd/yyyy 00:00:00"))
            'Dim ConnStr As String = "server='(local)'; trusted_connection=true; database='tllink'"
            sSQL = "SELECT EmployeeName, BadgeId, Punch_Type,Punch_Date, Punch_time, TerminalID FROM TERMINAL_TRANSACTIONS"
         sSQL &= " WHERE (Punch_Date =" & sqlDate & ") AND (Punch_Type IN ('IN', 'OUT' ,'DEPT' )) AND ((CAST(Punch_Time AS VARCHAR) + '-' + BadgeId) IN"
            sSQL &= " (SELECT (CAST(MAX(PUNCH_TIME) AS VARCHAR) + '-' + BADGEID) FROM TERMINAL_TRANSACTIONS"
            sSQL &= " WHERE  (Punch_Date =" & sqlDate & ") GROUP BY BADGEID))"
    rRec = g_cDB.GetRec(sSQL, , True)
    OleDbDataAdapter1.Fill(dSQLSet,rRec, "TERMINAL_TRANSACTIONS")
            'SQLTable = dSQLSet.Tables(0)
            Dim RowCurrent As DataRow
            Dim tr As SAP.Web.UI.Controls.TableRow
    For Each RowCurrent In dSQLSet.Table("TERMINAL_TRANSACTIONS").Rows
                tr = New SAP.Web.UI.Controls.TableRow
                If IsDBNull(RowCurrent("EmployeeName")) = False Then
                    tr.Cells.Add(New SAP.Web.UI.Controls.TableCell(New TextView(RowCurrent("EmployeeName"))))
                Else
                    tr.Cells.Add(New SAP.Web.UI.Controls.TableCell)
                End If
                If IsDBNull(RowCurrent("badgeid")) = False Then
                    tr.Cells.Add(New SAP.Web.UI.Controls.TableCell(New TextView(RowCurrent("badgeid"))))
                Else
                    tr.Cells.Add(New SAP.Web.UI.Controls.TableCell)
                End If
                If IsDBNull(RowCurrent("Punch_Type")) = False Then
                    If RowCurrent("Punch_Type") = "IN" Then
                        tr.Cells.Add(New SAP.Web.UI.Controls.TableCell(New SAP.Web.UI.Controls.Image("Web Resources/Images/in.gif")))
                    ElseIf RowCurrent("Punch_Type") = "OUT" Then
                        tr.Cells.Add(New SAP.Web.UI.Controls.TableCell(New SAP.Web.UI.Controls.Image("Web Resources/Images/out.gif")))
                    Else
                        tr.Cells.Add(New SAP.Web.UI.Controls.TableCell(New SAP.Web.UI.Controls.Image("Web Resources/Images/transfer.gif")))
                    End If
           End If
           Me.DataTable.Items.Add(tr)
    Next
    My table displays the employee name and badge id but the images are coming as broken link. I added the images to the web resources before deploying the par.
    The follwing is the runtime source from the browser
    </td></tr><tr rr="1"><td tableid="tae241ba0_DataTable" cc="0" rr="1" class="urSTTD urSTTDBdr1" style="padding:0;"><div tabindex="0" ti="0"><span ct="TextView" style="margin:0px;"></span></div></td><td tableid="tae241ba0_DataTable" cc="1" rr="1" class="urSTTD urSTTDBdr" style="padding:0;"><div tabindex="0" ti="0"><span ct="TextView" onkeydown="sapUrMapi_TextView_menuActivate('',event)" class="urTxtStd" style="white-space:nowrap;">000000000003412770</span></div></td><td tableid="tae241ba0_DataTable" cc="2" rr="1" class="urSTTD urSTTDBdr" style="padding:0;"><div tabindex="0" ti="0"><img class="urImg" src="/irj/portalapps/Timelink_Portal_APP/Images/green.gif" ct="Image" border="0" style="height:28;width:30;"></img></div></td><td tableid="tae241ba0_DataTable" cc="3" rr="1" class="urSTTD urSTTDBdr" style="padding:0;"><div tabindex="0" ti="0"><img class="urImg" src="/irj/portalapps/Timelink_Portal_APP/Images/in.gif" ct="Image" border="0"></img></div></td><td tableid="tae241ba0_DataTable" cc="4" rr="1" class="urSTTD urSTTDBdr" style="padding:0;"><div tabindex="0" ti="0"><span ct="TextView" onkeydown="sapUrMapi_TextView_menuActivate('',event)" class="urTxtStd" style="white-space:nowrap;">2/10/2006</span></div></td><td tableid="tae241ba0_DataTable" cc="5" rr="1" class="urSTTD urSTTDBdr" style="padding:0;"><div tabindex="0" ti="0"><span ct="TextView" onkeydown="sapUrMapi_TextView_menuActivate('',event)" class="urTxtStd" style="white-space:nowrap;">07:24:58</span></div>
    as you can see it includes the path to th images green.gif and in.gif
    thanks

  • Images as table cell content

    Hi,
    we are using thumbnail images for representing some employee status in a table. Images are displayed successfully.
    Problem is the white space between two cells, we want to eliminate the space between two cells. I have tried cell width property but it doesn't help.
    Any other suggestions to achieve this.
    Thanks a lot.
    Rgds

    Hi Sharanya,
    I could not find property cell spacing and cell padding property for cell.
    I am on Nw04.
    Is there other way we can achieve this.
    Rgds

Maybe you are looking for

  • [svn:fx-trunk] 10898: Fix for a bug: After playing a hide effect, a window wouldn't be visible again.

    Revision: 10898 Author:   [email protected] Date:     2009-10-06 13:54:04 -0700 (Tue, 06 Oct 2009) Log Message: Fix for a bug: After playing a hide effect, a window wouldn't be visible again. The issue here is that all effects that occur because of H

  • HT4623 Question: how do I get an app to complete the update?

    I have an app that is trying to update, but it won't complete the update. It's seems to be stuck. I searched my problem online, did the recommended tips, but they did not work. How do it get the phone to complete the update?

  • Loss of gray scale on monitor after start up

    During start up, the desktop image retains greys, once the hard drive icons appear the monitor shifts abruptly to black and white, contrast extremely high. However when i switch to windows the monitor is fine with no loss of greys or color. Mac Pro d

  • Two adf requests in one http request

    Hi! When I have change in my portal oracle.adf.view.rich.pprNavigation.OPTIONS from onWithForcePPR to off, I have two adf requests: in Method call before view, it's one request and in regions in view it's another request, and all my request beans is

  • Cannot download bootcamp drivers

    Hi, I have Macbook pro 2012 , 13" , third gen i5. i have recently installed windows 7 using boot camp, but i dont have drivers for it. Actually I have a very slow internet connection, and not stable. Thus after some time it looses its connection and