Bulletproof Button w/ Background Image - Need 2 Lines of Text`

Hi there - thanks in advance for your help!

So, I found this post very useful: https://www.campaignmonitor.com/forums/post/29995/#p29995

But I need to do the same thing with a background image. Can this be done? Here's the button code from the generator with only 1 line of text... But if I keep typing, instead of wrapping the text, the background repeats, thereby doubling the size of the button. And if I manually add a break to the code outside of the generator, the same thing happens.



<div><!--[if mso]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:205px;v-text-anchor:middle;width:233px;" strokecolor="#000000" fill="t">
    <v:fill type="tile" src="http://email-media.s3.amazonaws.com/AlexandAni/order_confirmation/new-arrivals.gif" color="#fffffd" />
    <w:anchorlock/>
    <center style="color:#000001;font-family:sans-serif;font-size:13px;font-weight:bold;">Check out our new arrivals.</center>
  </v:rect>
<![endif]--><a href="http://"
style="background-color:#fffffd;background-image:url(http://email-media.s3.amazonaws.com/AlexandAni/order_confirmation/new-arrivals.gif);border:1px solid #000000;color:#000001;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:205px;text-align:center;text-decoration:none;width:233px;-webkit-text-size-adjust:none;mso-hide:all;">Check out our new arrivals.</a></div>



Then I tried reducing the line-height by half (the original line-height was equal to the height of the button as I set in the generator), and the background stops repeating and the button is the correct height... But now the line-height is causing a huge gap between my 2 lines of text.

Any way to keep the button the same height and also reduce line-height?

paulw paulw, 3 years ago

Hey there!

It it possible to use the method outlined by Stig previously when using a background image. The steps are very slightly different, so to help out here, I've provided the amended code below:

<div><!--[if mso]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" href="http://" style="height:205px;v-text-anchor:middle;width:233px;line-height:24px;mso-fit-shape-to-text:t" inset="70px,50px,70px,50px" strokecolor="#000000" fill="t">
    <v:fill type="tile" src="http://email-media.s3.amazonaws.com/AlexandAni/order_confirmation/new-arrivals.gif" color="#fffffd" />
    <w:anchorlock/>
    <center style="color:#000001;font-family:sans-serif;font-size:13px;font-weight:bold;">Check out our new arrivals.<br/>Hello new line</center>
  </v:rect>
<![endif]--><a href="http://"
style="background-color:#fffffd;background-image:url(http://email-media.s3.amazonaws.com/AlexandAni/order_confirmation/new-arrivals.gif);border:1px solid #000000;color:#000001;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:24px;text-align:center;text-decoration:none;width:233px;-webkit-text-size-adjust:none;mso-hide:all;padding: 70px 0px;">Check out our new arrivals.<br/>Hello new line</a></div>

Here are those steps again, with the differences detailed:
* Set the line-height to 24px in the VML and HTML code.
* Added appropriate padding to the HTML CSS and add inset="70px,50px,70px,50px" to the VML’s <v:rect> tag, rather than the <v:textbox> . Youmay need to adjust the padding and width to get the desired result.
* Added style="mso-fit-shape-to-text:t" to the <v:rect> .
* Removed xmlns:w="urn:schemas-microsoft-com:office:word"

I have run some tests here and that works okay, let me know if you run into trouble and I can help further! Thanks again :)


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
amyhrnciar, 3 years ago

Thanks so much!!

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free