Knak allows you to place a background image behind other bits of content such as text and buttons. That way you can edit the content in front of the image.
Traditionally some marketers have refrained from using background images due to lack of support in some email clients. With Knak's updated email editor you can rest assured your background images will work everywhere!
Take a look at the screenshot below, this section is using a row background image with a text box and button over the top.
To set this up, select the row in which you want to add the background image. On the right you will see the Section Attributes. Select an image to use from your Knak image library or paste in an external URL.
With Landing pages, you can add a background image to the entire page. Go to settings and upload or a link to the image URL.
Knak gives you several options for how the background will can be displayed:
Auto
The background image is displayed in its original size unless it exceeds the size of it’s container when it will be 100% width
Cover
Resizes the background image to cover the entire container, even if it has to stretch the image or cut off some of the image
Contain
Resizes the background image to make sure the image it's fully visible. This setting will shrink the image height if the height of the container is smaller than the image
Stretch
Stretches the image across the whole content box. Not recommend unless you're trying to create a stretched affect
Repeat background
Image will be repeated until it fills the row dimensions. Good for creating a pattern using a small, repeatable image.
Full Width
The image will span the full width of the email, not just the content area.
Alignment
An background image's alignment can be changed vertically (top, middle and bottom) and horizontally (left, center, right). This can be found in any given section attributes.
We recommend playing around with the settings to ensure your image displays as desired.
Background image best practices
Use good color contrast
Ensure the colors in the background image and anything on top on have good contrast and are easy to view.
Include a fallback color
Some email clients such as Outlook have settings that prohibit all images (include background images) from downloading by default. As such its recommended to add an appropriate color in addition to the background image which would display in place of the background image. In Knak this would be a 'content color' which you can set section settings.
Keep it simple
Busy or complex backgrounds can be distracting and hard to understand, particularly when viewed on non-standard screen sizes such as tablets. Using more simple backgrounds such as patterns can offer better results.
Only use background images when you're placing content on top of the image
For example, in the below screenshot as the text ins't on top of the logo and image, it would be better to use regular image content blocks and not a background image. This will render better particularly on mobile.
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com