# Background html

**URL:** <https://integration.keap.com/t/background-html/52402>\
**Category:** Pro and Max\
**Created:** [September 15, 2018, 9:32pm UTC](https://integration.keap.com/t/background-html/52402 "2018-09-15T21:32:08Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Raine\_Boyd](https://sea1.discourse-cdn.com/flex019/user_avatar/integration.keap.com/raine_boyd/32/8129_2.png) [@Raine\_Boyd](https://integration.keap.com/u/Raine_Boyd)\
**Post date:** [September 15, 2018, 9:32pm UTC](https://integration.keap.com/t/background-html/52402/1 "2018-09-15T21:32:08Z")

</div>

Hi, on the html block, how do I change the background color? Thanks

---

<div class="post-metadata">

**Author:** ![Raine\_Boyd](https://sea1.discourse-cdn.com/flex019/user_avatar/integration.keap.com/raine_boyd/32/8129_2.png) [@Raine\_Boyd](https://integration.keap.com/u/Raine_Boyd)\
**Post date:** [September 18, 2018, 5:37am UTC](https://integration.keap.com/t/background-html/52402/3 "2018-09-18T05:37:15Z")

</div>

> [@martinc](#):
>
> \<table bgcolor=“#00FF00” width=100%\> \<tr\> \<th\>Month\</th\> \<th\>Deal\</th\> \</tr\> \<tr\> \<td align=“center”\>January\</td\> \<td align=“center”\>50% off!\</td\> \</tr\> \</table\>

This is great, thank you! It works but oddly the entire block does not show on preview nor in the email test I just sent myself, as if it was not there at all. It just shows in design mode. 😐

---

<div class="post-metadata">

**Author:** ![martinc](https://sea1.discourse-cdn.com/flex019/user_avatar/integration.keap.com/martinc/32/14_2.png) [@martinc](https://integration.keap.com/u/martinc)\
**Post date:** [September 18, 2018, 4:22pm UTC](https://integration.keap.com/t/background-html/52402/4 "2018-09-18T16:22:20Z")

</div>

Sorry, I didn’t actually test it and you’re right, it doesn’t work. But the following code will. It will not look right in the builder, but it will come through fine when you send it. Also, I deleted my previous post so as not to confuse anyone with bad code.

```
<div style="background-color:lightblue">
  <h3>This is a heading</h3>
  <p>This is a paragraph.</p>
</div>

```

 ![image](https://us1.discourse-cdn.com/flex019/uploads/infusionsoft1/original/2X/a/a2da1b97415fa42069a30f88169e7bfbb3037e76.jpeg)

---

<div class="post-metadata">

**Author:** ![Raine\_Boyd](https://sea1.discourse-cdn.com/flex019/user_avatar/integration.keap.com/raine_boyd/32/8129_2.png) [@Raine\_Boyd](https://integration.keap.com/u/Raine_Boyd)\
**Post date:** [September 18, 2018, 9:33pm UTC](https://integration.keap.com/t/background-html/52402/5 "2018-09-18T21:33:39Z")

</div>

perfect! Thank you so much!

---

<div class="post-metadata">

**Author:** ![Raine\_Boyd](https://sea1.discourse-cdn.com/flex019/user_avatar/integration.keap.com/raine_boyd/32/8129_2.png) [@Raine\_Boyd](https://integration.keap.com/u/Raine_Boyd)\
**Post date:** [September 20, 2018, 10:16pm UTC](https://integration.keap.com/t/background-html/52402/6 "2018-09-20T22:16:53Z")

</div>

Hi there, not sure if I need to open a new thread for this but feels like falls under this one still.  
I’m trying to add my own custom social media images with the html block. I used the same code that worked for the text - div style - but it disappears in the email test even thou shows in the design mode. Any ideas why it would work for one and not the other?

---

<div class="post-metadata">

**Author:** ![martinc](https://sea1.discourse-cdn.com/flex019/user_avatar/integration.keap.com/martinc/32/14_2.png) [@martinc](https://integration.keap.com/u/martinc)\
**Post date:** [September 21, 2018, 4:21pm UTC](https://integration.keap.com/t/background-html/52402/7 "2018-09-21T16:21:09Z")

</div>

Hi, @Raine_Boyd. If you post your code I could take a look.

---

<div class="post-metadata">

**Author:** ![Raine\_Boyd](https://sea1.discourse-cdn.com/flex019/user_avatar/integration.keap.com/raine_boyd/32/8129_2.png) [@Raine\_Boyd](https://integration.keap.com/u/Raine_Boyd)\
**Post date:** [September 22, 2018, 9:17pm UTC](https://integration.keap.com/t/background-html/52402/8 "2018-09-22T21:17:03Z")

</div>

Thank you! They are all for specific reshares instead of just follows in social media. Here is how it looks like in the design editor {which disappears when I send the email to myself} and below is the code:

 ![19%20PM](https://us1.discourse-cdn.com/flex019/uploads/infusionsoft1/original/2X/4/45aaa4f6fa7d6535fa2663612b5154397cda8f74.png)

---

<div class="post-metadata">

**Author:** ![Raine\_Boyd](https://sea1.discourse-cdn.com/flex019/user_avatar/integration.keap.com/raine_boyd/32/8129_2.png) [@Raine\_Boyd](https://integration.keap.com/u/Raine_Boyd)\
**Post date:** [September 22, 2018, 9:17pm UTC](https://integration.keap.com/t/background-html/52402/9 "2018-09-22T21:17:52Z")

</div>

Sorry, here is the code again:

```
<div align="center"><a href="mailto:yourfriend@example.com?subject=Such%20an%20awesome%20new%20blog!&body=I%20think%20you%20will%20love%20it%20as%20much%20as%20I%20do.%0D%0ATake%20a%20peek!%0D%0A%0D%0Ahttp://limetreefruits.com/newsletter/%0D%0A"><img src="http://limetreefruits.com/wp-content/uploads/2013/11/postcard100.jpg" width="50" /></a>

```

`<a href="http://www.facebook.com/share.php?u=http://www.limetreefruits.com/newsletter/"><img src="http://limetreefruits.com/wp-content/uploads/2013/02/TellFriendsFacebookResized.jpg" width="50" /></a>`

`<a href="http://clicktotweet.com/8UlcY"><img src="http://limetreefruits.com/wp-content/uploads/2013/02/TellFriendsTwitterResized.jpg" width="50" /></a>`

`<a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Flimetreefruits.com%2Fnewsletter&media=http%3A%2F%2Flimetreefruits.com%2Fwp-content%2Fuploads%2F2013%2F11%2FDream-Chasing-Pinterest.jpg&description=A%20FREE%20Dream%20Chasing%20Game%20Plan!%20http://limetreefruits.com/newsletter/" data-pin-do="buttonPin" data-pin-config="none"><img src="http://limetreefruits.com/wp-content/uploads/2013/02/TellFriendsPinterestResized.jpg" width="50" height="45"/></a></div>`

---

<div class="post-metadata">

**Author:** ![martinc](https://sea1.discourse-cdn.com/flex019/user_avatar/integration.keap.com/martinc/32/14_2.png) [@martinc](https://integration.keap.com/u/martinc)\
**Post date:** [September 24, 2018, 7:36pm UTC](https://integration.keap.com/t/background-html/52402/10 "2018-09-24T19:36:24Z")

</div>

So I figured out why the HTML code block is confusing everyone, including myself. The builder window is rendering your code in HTML5 but it is actually sent (and previewed) in XHTML. XHTML requires far more strict syntax/structure that HTML. It requires you to do things like close every tag. So for example, your first mailto would look something like this (I don’t know if all of those extra parameters are supported in XHTML?)

```
<div align="center"><EMAIL mailto="yourfriend@example.com">example@website.com</EMAIL>
        </div>

```

And to fix your images, you just need to add a closing image tag `</img>` after your images like the example below.

`<div style="background-color:#fff" align="center"><EMAIL mailto="yourfriend@example.com">email@yourfriend.com</EMAIL> <a href="http://clicktotweet.com/8UlcY"><img src="http://limetreefruits.com/wp-content/uploads/2013/02/TellFriendsTwitterResized.jpg" width="50"></img></a></div>`

It’s pretty strict and most of your code didn’t work. I would recommend based on your level of customization needs to just build it in Code builder.

![image](https://us1.discourse-cdn.com/flex019/uploads/infusionsoft1/original/2X/c/c8650d19d4909295dbd40d7c493cd0bfc116ed27.jpeg)

---

<div class="post-metadata">

**Author:** ![Raine\_Boyd](https://sea1.discourse-cdn.com/flex019/user_avatar/integration.keap.com/raine_boyd/32/8129_2.png) [@Raine\_Boyd](https://integration.keap.com/u/Raine_Boyd)\
**Post date:** [September 25, 2018, 8:13pm UTC](https://integration.keap.com/t/background-html/52402/11 "2018-09-25T20:13:51Z")

</div>

got it, thank you!
