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, 2 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, 2 years ago

Thanks so much!!

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098