Display Background Image in AJO

[montezh2001]

Hello, 

We develop our own HTML outside of the Email Designer in AJO. We recently are having an issue with a Background image not displaying - even when we choose to Simulate Content. We have text overlaying the background image in White Font, so when the background image does not display, it does not show the text, which is a problem for us. 

I understand that background-image needs to be in an URL format - which we've done. But, now it appears that maybe the coding is not correct any longer. Here's the current code we are using: 

<div class="mobile_only"><table class="mob_width_320 hideDesktop showMobile" border="0" cellspacing="0" cellpadding="0" style="mso-hide:all;overflow:hidden;max-height:0;width:0;display:none;line-height:0;visibility:hidden;align:center;"><tbody><tr><td style="height:178px;width:350px;BACKGROUND-IMAGE:url(https://***.************.********.com/fe24b6c0-e3dc-11e9-8f5d-7f27416c5f0d/urn:aaid:aem:7679d2ba-da1b-407a-a57c-ed06793393cc/oak:1.0::ci:6d1a282871a8572f242c3579ec6f3e7e/2c9f3a66-e755-34ca-91d4-376afd131725);BACKGROUND-REPEAT:no-repeat;COLOR:#ffff;TEXT-ALIGN:center;" bgcolor="#fff" valign="top" width="350" height="178" background="https://***.************.********.com/fe24b6c0-e3dc-11e9-8f5d-7f27416c5f0d/urn:aaid:aem:7679d2ba-da1b-407a-a57c-ed06793393cc/oak:1.0::ci:6d1a282871a8572f242c3579ec6f3e7e/2c9f3a66-e755-34ca-91d4-376afd131725"><table class="mob_width_320" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto 0 auto;mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;width:350px;">

Does anyone have any experience with coding background images and what format should it be in? 

[nitesh_kumar · Accepted solution]

Hi @montezh2001 ,

Looks like the parent element div tag has styles added that hide the whole block, Is it something you are overriding somewhere?

display: none;

visibility: hidden;

• Comment out or remove the hide rules (display:none; visibility:hidden;) so the block isn’t hidden. Can you check after removing these?

• It's not the root cause but make sure your CSS is lowercase—use background-image instead of BACKGROUND-IMAGE.

Hope this helps!

Thanks,

Nitesh

[montezh2001]

@nitesh_kumar - thank you. This worked, but there were other issues with the image that need to be solved. Based on the coding, this only displayed the background image for Mobile devices. 

I need to figure out why Desktop devices are still not displaying the background-image. 

Thanks again.