# Email not displaying background colors in Gmail App

**URL:** <https://forum.mautic.org/t/email-not-displaying-background-colors-in-gmail-app/24500>\
**Category:** Product Support\
**Tags:** mautic-4\
**Created:** [June 18, 2022, 3:14am UTC](https://forum.mautic.org/t/email-not-displaying-background-colors-in-gmail-app/24500 "2022-06-18T03:14:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![troopsy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/troopsy/32/7036_2.png) [@troopsy](https://forum.mautic.org/u/troopsy)\
**Post date:** [June 18, 2022, 3:14am UTC](https://forum.mautic.org/t/email-not-displaying-background-colors-in-gmail-app/24500/1 "2022-06-18T03:14:44Z")

</div>

**Your software**  
My Mautic version is: 4.3.1  
My PHP version is: 7.4  
My Database type and version is: MariaDb 10.3

**Your problem**  
My problem is: Email not display background colors in Gmail App. It display fine everywhere else (Gmail desktop, Apple mail, etc.)

These errors are showing in the log: None.

Steps I have tried to fix the problem: I have changed the code in both the mjml and html. The email display correctly in every other application but the Gmail app. I know that a large number of users utilize the gmail app.

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [June 18, 2022, 5:40am UTC](https://forum.mautic.org/t/email-not-displaying-background-colors-in-gmail-app/24500/2 "2022-06-18T05:40:35Z")

</div>

That is specific to your design because its working fine by me. I cant reproduce the issue. Maybe insert the relevant code here?

---

<div class="post-metadata">

**Author:** ![troopsy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/troopsy/32/7036_2.png) [@troopsy](https://forum.mautic.org/u/troopsy)\
**Post date:** [June 19, 2022, 10:54am UTC](https://forum.mautic.org/t/email-not-displaying-background-colors-in-gmail-app/24500/3 "2022-06-19T10:54:38Z")

</div>

Joey, thank you for the reply. The code is listed below. The background-color is not displaying. I tried changing `background-color="#000000"` to `style="background-color:#000000"` but the editor changes it back to the initial way.

```auto
<mjml>
	<mj-body background-color="#000000">
		<mj-section background-color="#111111" padding-bottom="0">
			<mj-column width="100%">
				<mj-image href="https://www.test.com" src="https://e.test.com/themes/hoah/assets/acft.png?vcb3d6295" alt="ACFT App logo" border="none" width="100px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0"/>
			</mj-column>
		</mj-section>
		<mj-section background-color="#333333" padding-top="0">
			<mj-column width="100%" background-color="#111111">
				<mj-text font-size="32px" font-family="Arial Black, Gadget, sans-serif" color="white" padding-top="0" padding-left="10px" align="center">
					<p>Lets Get to Work!
					</p>
				</mj-text>
				<mj-image src="https://e.test.com/media/images/ag2ahesddnhafpo2norycmuxti.jpg" alt="Deadlift" border="none" width="600px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0" id="i4ko"/>
				<mj-text color="white" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" padding-bottom="0px" padding-top="20" font-size="20px" line-height="24px" container-background-color="#000000" __="1">
					<p>
						<strong>
							<span style="color:#eaeaea">The App was created
								<em>for you</em>&nbsp;by Warriors. &nbsp;Take a look below to find out where to start!</span>
						</strong>
					</p>
				</mj-text>
			</mj-column>
			<mj-section background-color="rgba(0,0,0,0)" __="1">
				<mj-column width="50%">
					<mj-text align="center" color="#eaeaea" font-family="Arial Black, Gadget, sans-serif" font-size="24px" padding-top="10" font-weight="bold" padding-bottom="0" line-height="28px">
						<p> Fitness Plans
						</p>
					</mj-text>
					<mj-text color="#eaeaea" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="18px" padding-top="0" padding-bottom="0" line-height="24px">
						<p>
							<strong>Designed for you. &nbsp;Perfect fitness in&nbsp! &nbsp; equipment needed!</strong>
						</p>
					</mj-text>
				</mj-column>
				<mj-column width="50%">
					<mj-image src="https://e.test.com/media/images/img_3948.jpg" alt="Paprikas" border="none" width="290px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0" id="i1qog" border-radius="10px 10px 10px 10px"/>
				</mj-column>
			</mj-section>
			<mj-section border="3px dashed #ffd700">
				<mj-column width="50%">
					<mj-text align="center" color="#eaeaea" font-family="Arial Black, Gadget, sans-serif" font-size="24px" padding-top="10" font-weight="bold" padding-bottom="0" line-height="28px">
						<p>The Ultimate Stopwatch
						</p>
					</mj-text>
					<mj-text color="#eaeaea" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="18px" padding-top="0" padding-bottom="0" id="ixvkg" line-height="24px">
						<p>
							<strong>See your progess on any timed event.&nbsp;Are you close to maxing? Lagging behind? The Stopwatch will let you know!</strong>
						</p>
					</mj-text>
				</mj-column>
				<mj-column width="50%">
					<mj-image src="https://e.test.com/media/images/img_3952_2-1.jpg" alt="Paprikas" border="none" width="290px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0" border-radius="10px 10px 10px 10px" id="ihp1l"/>
				</mj-column>
			</mj-section>
			<mj-section border="0 none #000000" __="1">
				<mj-column width="50%" background-color="rgba(0,0,0,0)" __="1" border="0 none #000000">
					<mj-text align="center" color="#eaeaea" font-family="Arial Black, Gadget, sans-serif" font-size="24px" padding-top="10" font-weight="bold" padding-bottom="0" id="im9pj" line-height="28px">
						<p>Enhanced Scorechart
						</p>
					</mj-text>
					<mj-text color="#eaeaea" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="18px" padding-top="0" id="i8j8j" padding-bottom="0" line-height="24px">
						<p>
							<strong>Check out your standards.
							</strong>
							<strong>What's your max? &nbsp;At Test, we always shoot for the max. &nbsp;600 is no longer the standard.
								<span style="color:#ffd700">Xtended Scale coming soon!</span>
							</strong>
						</p>
					</mj-text>
				</mj-column>mj-column&gt;
				<mj-column width="50%" border="0 none #000000" __="1">
					<mj-image src="https://e.test.com/media/images/img_3947.jpg" alt="More Paprikas" border="none" width="290px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0" id="ia8wn" border-radius="10px 10px 10px 10px"/>
				</mj-column>
			</mj-section>
		</mj-section>
		<mj-section background-color="#111111" padding-top="0">
			<mj-column>
				<mj-social font-size="12px" icon-size="24px" border-radius="12px" mode="horizontal">
					<mj-social-element name="linkedin" href="https://www.linkedin.com/company/Test/"></mj-social-element>
					<mj-social-element name="facebook" href="https://www.facebook.com/Test"></mj-social-element>
					<mj-social-element name="twitter" font-size="20px" line-height="24px" href="https://twitter.com/Test"></mj-social-element>
					<mj-social-element name="youtube" font-size="20px" line-height="24px" href=""></mj-social-element>
				</mj-social>
			</mj-column>
			<mj-column>
				<mj-image src="https://e.test.com/media/images/gold_star_sm.png" id="irg8y" padding-bottom="0" padding-top="0"/>
			</mj-column>
			<mj-column>
				<mj-text color="white" align="center" padding-top="0" padding-bottom="0" font-size="14px" line-height="16px">
					<p>
						<a href="{unsubscribe_url}" style="text-decoration-color:#ffd700">
							<span style="color:#ffd700">Manage Email Preferences</span>
						</a>
					</p>
				</mj-text>
			</mj-column>
		</mj-section>
		<mj-section>
			<mj-column>
				<mj-text padding-top="0" padding-bottom="0" font-size="14px" line-height="16px" align="center">
					<p>
						<span style="color:#eaeaea">© 2022&nbsp;Test, LLC | 123 Test Lane</span>
					</p>
				</mj-text>
			</mj-column>
		</mj-section>
	</mj-body>
</mjml>

```

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [June 19, 2022, 1:22pm UTC](https://forum.mautic.org/t/email-not-displaying-background-colors-in-gmail-app/24500/4 "2022-06-19T13:22:13Z")

</div>

Hi,  
for me it throws a bunch of errors:

> **[MJML - The Responsive Email Framework](https://mjml.io/try-it-live/mr5kSu1Oc)**
>
> The only framework that makes responsive email easy. MJML is a markup language designed to reduce the pain of coding a responsive email.

Instead of using span, which is not an mjml element, try to color the mj-column or the mj-text itself.  
You can use container-background-color in an mj-text element.

[https://documentation.mjml.io/#mj-text](https://documentation.mjml.io/#mj-text)

Joey

---

<div class="post-metadata">

**Author:** ![troopsy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/troopsy/32/7036_2.png) [@troopsy](https://forum.mautic.org/u/troopsy)\
**Post date:** [June 19, 2022, 3:56pm UTC](https://forum.mautic.org/t/email-not-displaying-background-colors-in-gmail-app/24500/5 "2022-06-19T15:56:30Z")

</div>

Thanks Joey, let me take a look. You are able to get dark backgrounds to display correctly in the gmail mobile app? That’s the only place where I’m experiencing this issue. It display correctly everywhere else.