I am creating and sending HTML e-mails.
I'm using markup like
<table style="background: url('http://example.com/App_Sprites/image.gif');>
However, the images do not appear when I download messages containing this sort of markup from an e-mail client. When I do things like
<img src="http://example.com/App_Sprites/image.gif" />
the images download fine.
I need the image to be a background because I need to show some text over it. Can I use the image tag and position the text over it somehow? Or should using the background image actually be working, and something else may be wrong?
Html emails usally don't download background images.But there is a trick you can do.
<div style="z-index:10;position:relative">your text here</div>
<img src="http://example.com/App_Sprites/image.gif" style="margin-top:-20px" />
play with margin-top number
The background property works on some email clients use this as a reference. This is very useful.
I would avoid using background images and stick to solid colors, the reason why is because not all email clients are going to have this feature and capability to see the background image.
or use base64 directly =)
hm divs are even better than tables
Related
I am creating an email template and i need to writte text in the "middle" of an image, but some email system's doesn't allow positioning, what can i use?
My HTML:
<img src="http://www.freelargeimages.com/wp-content/uploads/2014/12/Black_background-5.jpg" style="width:400px; height: 350px;" />
<p style="color:blue;">SOME TEXT FOR CONTENT..</p>
example: https://jsfiddle.net/2zehs9f5/
If you're doing this for email, I'd recommend adding the text to the image itself, rather than positioning it with a background-image. The reason for this is that background-image isn't very well supported (particularly in Outlook 07/10/13) and will have to fallback to a solid colour, which may ruin the entire design.
I'd also move away from p tags, as they can render differently in different email clients.
Here's a JSFiddle of the finished code: https://jsfiddle.net/czxrp2hf/1/
Also, this link is quite helpful for finding out what CSS is supported in which email clients: https://www.campaignmonitor.com/css/
All in all Natalie has right.
If you want to try something like this:
<td valign="middle" background="your_image.jpg" width="100%" style="background-image: url(your_image.jpg)">
Your text here
</td>
should work in all major mailer (web and offline); except, as far as i know, Outlook 2007 and Outlook 2010.
Be aware that i put both the standard definition of background image AND the inline CSS one.
I have my web template (made in Photoshop) ready and set to upload to server; however, if user hides/disables images, website will be blank because all the text is on the images.
I have created the CSS layout and want to make a text version of the website, but how do I achieve this without having the text overlap the image?? I want the user to still see a text version of the website in case they disable the images on their browser.
HTML CODE:
<div id="main_divs_container">
<div id="left_div"><img src="images/left_div.jpg" width="249" height="622" alt=""></div>
<div id="index_middle_div"><img src="images/index_middle_div.jpg" width="488" height="622" alt=""></div>
<div id="right_div"><img src="images/right_div.jpg" width="253" height="622" alt=""></div>
</div>
Place the text in your alt= tag.
That should show the text when images are blocked.
(That's pretty much the purpose of the alt tag, to represent content when a image is inaccessible, one way or another)
It won't be pretty when it contains a load of text, though, if it renders at all.
The best option would be to use the images (without text) as background, and add the text on top of it through HTML.
you have to create one html version of website. In photoshop we create template just for reference or client review (just for visual purpose.) . that is not the final output.
You can use a CSS Image Replacement (http://css-tricks.com/css-image-replacement/) to have text and images at the sime time in Your HTML (text not visible).
Than You have to write CSS styles, one that will show the images and hides the text, and second that will do the oposit.
Next just apply right style using JS to detect if user has blocked images or not :)
I want to send html body email like below with background-image css to my users :
<div style='width:500px;height:1000px;background-color:black;background-image:url(http://upl0ad.org/images/mylogo.gif) repeat scroll left top;'>
My Content
</div>
but as the link below says google does not support background-image css!
http://www.campaignmonitor.com/css/
what can I do about that?
Have you tried setting the background attribute of a table?
This is the recommended method detailed in the following Mailchimp blog post: Background Images and CSS in HTML Email.
Example (Tested in Gmail)
<table background="https://www.google.com/intl/en_com/images/srpr/logo3w.png" width="275" height="95">
<tr>
<td>
Email Content...
</td>
</tr>
</table>
You can't do anything about it. Using CSS to set background image is not supported in many web-mail application because of security reasons.
The only way to actually show background behind text is to create an image with text on it and display it using <img src="##" /> tag. Though, always remember to add link to text version of your email and/or link to web-page based copy of your newsletter.
Additoinally, you need to remember that newsletter design is very different to website design. You need to ignore all usual standards, you need to use tables, inline styles, img tags etc.
Check out this page for few good suggestions: http://www.sitepoint.com/code-html-email-newsletters/
Also MailChip (probably most popular Newsletter management system) has few very good suggestions on how to code HTML emails: http://kb.mailchimp.com/article/how-to-code-html-emails
Update as of 2019. While there are issues with adding background image from inline image on the email (at least I did not find a way to make it work). Actually css-background image works fine on at least some elements as long as they are absolute urls to resource, my snippet that works on gmail as of June 2019:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-image:url('https://via.placeholder.com/30x300/09f.png');background-repeat:repeat-x">
This makes me wonder why it didn't work for the author. I have few theories:
a) back then it didn't work
b) it does not work on div elements
c) link was broken
d) missing single quotation mark
e) single and not double quotation mark around attribute style
f) despite the width and height on style, div was of 0x0 size
(Some of those above sound stupid)
What eventually worked for me is changing an image extension from .svg to .png
It seems Gmail doesn't support .svg images.
I have a large div with the site header/logo as the background image. Is there anything wrong with putting a h2 tag containing the site title behind this using z-index, so that it would show if the user couldn't/didn't get the image for some reason? I know this is different to a standard [background on the h2 element] image replacement. (EDIT: Sorry maybe i'm not making it clear - i'm using a div background image not an IMG tag)
You should use the alt attribute of the img tag, so if the image isn't loaded for some reason, the text would appear.
This is exactly why the alt attr exists,.
If possible, I would ditch the div and just use an h2 with an id and set a background image to that.
I do that whenever possible to avoid excessive divs when I could use other block-level elements, if it only has a background and text. An h* with a background image is still a heading.
You can simple place img tag with alt attribute. That way if image is not loaded, text will be displayed.
<img src="" alt="This text will be displayed" />
Google doesn't like what you describe:
http://www.google.com/support/webmasters/bin/answer.py?answer=66353
However, from a pure design perspective, there is no real problem, save some bloated code.
You might want to see how often your images fail before you attempt any changes.
That's fine. Note that many feel the site logo isn't really something you'd put into an h* tag other than on the home page, when it makes sense to put it in an h1 tag.
I am designing my first website.
I have designed a button image in gimp and saved it as a jpg.
I want to use this button for my navigation buttons on the site. Should I make a separate image(jpeg) for each button or is it possible to just use one image and then overlay text on top of the images on the page using HTML? What's the best practice here?
Usually in this case you use just CSS by setting background property of elements that should be your navigation buttons.
For example you could have a ul:
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
</ul>
and then just style it in you css by using background-image or similar styles, take a look here for some examples..
You're asking a question more about design than about coding. If you can implement your desired design by developing a single button background and then overlaying text in a standard font, do it! More broadly: don't put text in an image if you're just using a standard font.
On the other hand, if you want a fancy swirly font that can only be depicted in an image, you'll need to create a specialized image for each button with that button's text.
In that case, be sure to insert the image purely with CSS. Never, ever embed an <img /> tag with a textual button on a page.
Definitely reuse the images and overlay text. For ideas on how to do this, look at this tutorial:
Image button overlay text tutorial
Also, you mentioned using jpg. Consider using PNG instead for the button images, unless they are "real world" images. For simple gradients and solid colors, PNG is the way to go.
I havent seen the image but I generally try to Use CSS for as much of the graphical design as possible. Button generally tend to be very simple in design. However if you must use an image you can assign a background to a tag and then use text in the tag. Example would be to assign a background to a
<button class="myButtonClass">MyButtonText</button>
<style>
.myButtonClass {
//enter your button style here.
}
</style>
Depends on how you've designed you site, as always theres loads of ways to do everything.
If your buttons are just static i would recommend using images, theres no harm doing it like this.
<span>Your button</span>
then you can use the css to set the image background.
.home{display:block; height:20px; width:40px; background:url(image.gif);}
and your also gonna need to hide the text in the span.
.home span{display:none;}
Theres no harm in using simple text either, most of the time its personal preference.
Just leave ou the .home span{display:none;} and replace it with something to centre the text in the button.
As mentioned in another answer its also good practice to wrap your images in list items. Might sound wierd at first. But in practice its the best way.
you can put the image as backgroud...