What Is a Background Image in Knak?
A background image sits behind other content such as text or buttons. You can still edit and move the content that appears on top of the image. This approach is useful for hero sections, call-to-action areas, or branded headers.
Add a Background Image to a Section
Use this method when you want to place additional content on top of an image.
Select the row where you want the background image.
Open Section Attributes in the right-side panel.
Locate the Background Image setting.
Choose one of the following:
Select an image from your Knak image library.
Paste an external image URL.
Add a Background Image to an Entire Email or Landing Page
Use this option when you want a background image to apply to the full email or landing page.
Open the email or landing page editor.
Click the Settings tab.
Upload an image or paste an image URL.
The background image now applies to the entire page.
Background Image Display Options
Knak provides several options to control how your background image appears.
Auto
Displays the image at its original size.
Scales to full width if the image exceeds the container size.
Cover
Scales the image to fully cover the container.
May crop parts of the image.
Contain
Scales the image so the full image remains visible.
May reduce image height to fit the container.
Stretch
Stretches the image across the entire container.
May distort the image.
Use only for intentional visual effects.
Repeat Background
Repeats the image to fill the container.
Works well for patterns or textures.
Full Width
Extends the image across the full width of the email.
Ignores the standard content width.
Optimize Background Images for Desktop and Mobile
Your background image may look different depending on the screen size. Review your design in both the desktop and mobile editing views.
Use responsive settings to control how the background image appears on each device.
Locate the background image display or alignment setting you want to adjust.
Click the mobile and desktop icon beside the setting to expand the responsive options.
Adjust the setting for the desktop version.
Adjust the setting for the mobile version.
Review both editing views to confirm the image displays as expected.
You can customize these settings separately for desktop and mobile:
Background image width: Auto, Cover, Contain, or Stretch
Horizontal alignment
Vertical alignment
For example, Cover may work well on desktop while Contain works better on mobile. You can also change the alignment to keep the most important part of the image visible on smaller screens.
Adjust Background Image Alignment
You can control where the image sits within the container.
Alignment Options
Vertical: top, middle, bottom
Horizontal: left, center, right
You can find these settings in Section Attributes for each row.
Background Image Best Practices
Follow these guidelines to ensure the best results across devices and email clients.
Use Good Color Contrast
Ensure text and buttons remain easy to read. Avoid placing light text on light image areas.
Include a Fallback Color
Some email clients block images by default. Set a content color in the section settings so a solid color appears if the image does not load.
Keep It Simple
Avoid busy or complex images. Simple patterns or subtle images work best, especially on tablets and mobile devices.
Use Background Images Only When Needed
Use background images only when content appears on top of the image.
If content sits beside or below an image, use a standard image content block instead.
Need more help? Contact support via live chat using the chat bubble in the bottom right corner or email support@knak.com.