How to add background-image into HTML email in Zurb Foundation 6

Question

I am trying to do HTML email with Zurb Foudation 6. After sending HTML email on mail clients there are don't show all background-images, but in web version everytning is ok. How to correct add background-image? For exapmle I have this code:

<columns small="36" large="27" style="background-image: url('assets/img/BrownBG.png');>
    <spacer size="26"></spacer>
        <row>
            <columns small="18" large="18">
               <a>Link</a>
            </columns>
            <columns small="18" large="18">
               <a>Link</a>
            </columns>
        </row>
          <spacer size="20"></spacer>
        <row>
          <columns small="36" large="18">
              <p>Some paragraph</p>
          <spacer size="27"></spacer>
          </columns>
        </row>
</columns>

once you have the compiled code then you can use the methods in this thread https://stackoverflow.com/questions/44525250/how-to-use-image-as-a-table-background-in-email — Syfer, Apr 02 '18 at 10:56

Hett · Accepted Answer · 2018-04-03T11:47:20.143

You need to place styles in app.scss (or included files), after that ZURB will be able to make correct inline style. Do not write inline styles manual.

Besides, you need setup babel to convert relative paths to abloluse like as in *.html templates.

.pipe($.if(!!awsURL, $.replace(/('|")(\/?assets\/img)/g, "$1" + awsURL)))

Example for aws:

// Compile Sass into CSS
function sass() {
    var awsURL = !!CONFIG && !!CONFIG.aws && !!CONFIG.aws.url ? CONFIG.aws.url : false;
    return gulp.src('src/assets/scss/app.scss')
    .pipe($.if(!PRODUCTION, $.sourcemaps.init()))
    .pipe($.sass({
      includePaths: ['node_modules/foundation-emails/scss']
    }).on('error', $.sass.logError))
    .pipe($.if(PRODUCTION, $.uncss(
     {
        html: ['dist/**/*.html']
      })))
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe($.if(!!awsURL, $.replace(/('|")(\/?assets\/img)/g, "$1" + awsURL)))
    .pipe(gulp.dest('dist/css'));
}

and add creds pipe in task. It will look something like this:

// Build emails, then send to EMAIL
gulp.task('mail',
  gulp.series(creds, 'build', aws, mail));

This is necessary to initialize the CONFIG var.

How to add background-image into HTML email in Zurb Foundation 6

1 Answers1