Bulletproof background images

[Creativenauts]

Custom helper that adds bulletproof background images to your email templates.

Based on https://backgrounds.cm/

Usage

{{#bg-img src="assets/img/image.jpg" classes="hero-header" imgwidth="900" imgheight="520" bgcolor="#212831" top_padding="30" bottom_padding="30"}}Your Content Here{{/bg-img}}

Options

• src: Path to your background image
• classes: Adds custom classes for custom css styling
• imgwidth: Sets the width for Outlooks <v:rect> tag.
• imgheight: Sets the height for Outlooks <v:rect> tag.
• bgcolor: Sets background color for the block of code. Must be hex value (#212831)
• top_padding: Adds padding to the top of the background image block
• bottom_padding: Adds padding to the of bottom the background image block.
• fitcontent: Sets mso-fit-shape-to-text:true. Use at your own risk.

Example

[kball]

Love this! We think this would actually be better as an inky tag than a helper, that way folks who aren't using the template could still use it. Was there a reason you did it here instead? Could you set it up as an inky tag here? https://github.com/zurb/inky

[Creativenauts]

@kball It could probably be an Inky tag as well. I just wasn't very familiar with the framework at the time of creating this for my project. I haven't gotten back around to messing with zurb since I finished the project I had been working on. I will be working on a few more projects for our platform soon which I will investigate adding it to inky.