Sections (mj-section)
Configure section-level padding, background colors, background images, and container borders.
Key Takeaways
- Sections are the primary structural building blocks of an email.
- Control section background colors, background images, and vertical/horizontal padding.
- Configure full-width backgrounds to create visual breaks between email parts.
- Set section-level borders to create distinct card-style containers.
Configuring Section Properties#
Selecting any section on the canvas opens its properties in the right-hand panel:
- Background Color: Hex color code applied to the section. When using full-width mode, this color fills the full viewport width.
- Background Image: An absolute URL to a hosted image. PostBrix generates the required VML (
v:image/v:rect) tags so background images render cleanly in Outlook desktop clients. - Padding: Controls the internal breathing room around all child columns. We recommend setting vertical padding (e.g.
24px 0px) at the section level, and horizontal padding inside the individual columns. - Border: Add subtle top, bottom, or boxed borders (e.g.,
1px solid #e2e8f0) to visually separate modules.
Outlook Considerations for Background Images#
Background images in email require special handling because Microsoft Outlook (Word rendering engine) ignores standard CSS background-image on table cells.
PostBrix automatically injects MSO conditional VML tags:
Always configure a matching fallback background color in the properties panel. If an email client blocks images by default, the fallback color ensures text remains readable.
Frequently Asked Questions
Do background images work in all email clients?
Most modern clients support CSS background images, and PostBrix generates VML fallback tags for desktop Outlook. However, some webmail clients (like Yahoo in certain modes) disable background images. Always define a high-contrast fallback background color.
How do I eliminate gaps between two adjacent sections?
Set padding-bottom to 0px on the upper section and padding-top to 0px on the lower section in the properties inspector.