[SalesForce] table background image is not displaying in outlook

I would definitely not break your column heading row and data rows into separate tables. The go-to web-dev methods for styling rarely work consistently in email HTML. You'll need to rely on in-line styles for formatting.

I generally code looping HTML output like this, because it's easier to tweak for email client adjustments:

%%[

VAR @rs, @row, @cntr, @soNumber
set @soNumber = AttributeValue("sonumber")
SET @rs = LookupRows("Sales Order Lines Import1","PBSI__SoName__c",@soNumber) 

if rowcount(@rs) > 0 then

    FOR @cntr = 1 to RowCount(@rs) do 

      var @itemNumber, @description, @qty, @um, @catalogLink, @series

      SET @row = Row(@rs, @cntr) 
      set @itemNumber = Field(@row,"Item_Number_Name__c")
      set @description = Field(@row,"pBSI__Item_SOLine_Description__c")
      set @qty = FormatNumber(Field(@row,"PBSI__Quantity_Needed__c"),"N")
      set @um = Field(@row,"UM__c")
      set @catalogLink = Field(@row,"Datasheet__c")
      set @series = Field(@row,"Series__c")

      ]%%

      %%[ if @cntr == 1 then ]%%

        <p><b>Samples in this Order:</b></p>
        <table cellspacing="0" cellpadding="0" border="1">
          <tr>
            <td>Item Number</td>
            <td>Description</td>
            <td>Quantity</td>
            <td>UM</td>
            <td>Catalog Link</td>
          </tr>

      %%[ endif ]%%

        <tr>
            <td>%%=v(@itemNumber)=%%</td>
            <td>%%=v(@description)=%%</td>
            <td>%%=v(@qty)=%%</td>
            <td>%%=v(@um)=%%</td>
            <td><a href="%%=redirectto(@catalogLink)=%%">%%=v(@series)=%%</a></td>
        </tr>


     %%[ if @cntr == rowcount(@rs) then ]%%
        </table>
     %%[ endif ]%%

    %%[ 
      NEXT @cntr
    ]%%

%%[ else ]%%

   <p>no rows found</p>    

%%[ endif ]%%

Generally outlooks tend to scale the images to its natural width and height if the width is set to 100%. In order to fix this issue I tend to keep the width and height inlined in the image css.

Here are the steps to reproduce:

• Upload an image of any width and set it to the desired width (width less than the actual email table) inlined in the <img attribute. The reason why we set fixed width and height to <img attribute is because outlook doesn't keep the image size to table width and sets to natural image size.
• Set a class to the <img attribute or set it to the <td> which is wrapping the <img attribute. If you're using the content builder then it will strip out all the elements from <img tag that's why it is best to set the class to <td>

Here is the sample code:

1. In the email body

<table class="emailWidthAuto" width="600" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td class="banner" align="center"><img src="http://unsplash.it/g/1200/400?text=BANNER" border="0" alt="Banner"  style="display:block; width: 600px" width="600" /></td>
    </tr>
</table>

2. In the email header

@media screen and (max-width: 600px) {
    .emailWidthAuto {
        width: 100% !important;
        height: auto !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    .banner img {
        height: auto !important;
        width: 100% !important;
    }
}

Reference post to set this as a content block for users with limited knowledge of html and css here.