Is it possible to stop repeating background image in a table data (TD) without CSS ?
For example
<table>
<tr>
<td background="http://foobar.com/image.jpg">Some text</td>
</tr>
</table>
I'm looking for a HTML solution, because I'm developing HTML template which will be used for a mail newsletter.
You can append the css to your tag straight in your html code:
<td style="background-image:url(smile.gif); background-repeat:repeat;">
I think there is no way to do that just using html!
Simple answer: No.
Fortunately, most emails you can use inline css styling. As such, I'd try the following and see if it accomplishes what you're looking for.
<td style="background:url(http://foobar.com/image.jpg) no-repeat;">Some text</td>
In the event that fails (as I've seen it do so before), you're only other option is place the image in an <img> tag and manipulate it so it falls underneath the text.
See here for supported CSS attributes: http://www.campaignmonitor.com/css/
Hope this helps.
background images are supported. Please check out this generator:
http://backgrounds.cm
If you want the image not to repeat just add an inline style:
style="background-repeat: no-repeat;"
to the tags containing the background image.
For maximum compatibility, you should use both inline CSS and the HTML background attribute, as some clients ignore one but not the other.
<td style="background-image:url('http://www.example.com/smile.gif'); background-repeat:no-repeat;" background="http://www.example.com/smile.gif">Some text</td>
Some points to note:
You must use a absolute URL for the image src
The quotes around the the URL in the background-image inline style should be there (the opposite of the normal CSS recommendation, but some clients have issues if the single quotes aren't included.)
Don't use CSS shorthand, again some clients ignore it although they will parse the longhand. Also, some will set a background color of #000000 if you don't set a background-color in the shorthand version.
Background images don't work at all in Outlook 2007, unless you use some rather nifty Microsoft proprietary code. Unfortunately, that code doesn't allow you to stop it repeating.
The best way to stop it repeating is simply to make the image much bigger than it needs to be, so that it never needs to repeat.
Related
I was wondering if anybody knew a way where you can have an image that also serves as a link and then be able to put text over this image using only HTML?
Essentially what I am using this for is to create "pretty" looking buttons for my client. Unfortunately, the program that I am REQUIRED to use will not allow me to insert any CSS code so this will have to be purely HTML.
And I know I could create the image in Photo Shop with the text over it already. However, I would like this to be a dynamic button as I have hundreds that I want to format to this style and if new ones appear I don't want to create a new image every time they want a new button.
Are there any solutions to an issue like this?
Even though I still can't for the life of me understand why you would want to do something like this. Or why someone would care about restricting css markup since it's not even really code. However you could take it back to the old school HTML4 days and do something like this if I understand your restrictions correctly. Which should still render fine in html5. Hope it helps.
CODEPEN TO PLAY
...PS, tell whoever decided to restrict CSS use that it's pretty counter intuitive to a contemporary...well, anything. Just my two cents. :D
Oh also, by the way, elements like <center> aren't supported in html5 even though it should render, so you'd be breaking some rules. If they mean for it to be an actual HTML5 solution, then you require CSS.
<table>
<tr>
<td></td>
<td rowspan=2><img src="http://res.freestockphotos.biz/pictures/15/15789-illustration-of-a-blank-glossy-rectangular-button-pv.png"
height="50" width="200">
</td>
</tr>
<tr>
<td colspan=2><center>overlay text</center></td>
</tr>
</table>
You could also just use like background= on a td or something if your images are all fixed size etc.
I want to do the following:
------------------------------------------------
width: 100%;
height: 60px
image center
image bottom/right
-------------------------------------------------
I used to do it with table:
<table border="0">
<tr>
<td width="25%"></td>
<td width="50%"><center>image center</center></td>
<td width="25%" valing bottom><div align="right">image bottom/right</div></td>
</tr>
</table>
but they say using tables for formatting is bad (Dunno why)
So is there any idea how to do the following banner? I heard there is absolute position, so mightbe the 2 images could be embedded to 2 divs
First off before I do any explaining I think you could use some visuals of just how powerful CSS can be...
CSS Zen Garden shows how using a different CSS style sheet can completely change the entire way a site looks (use theme links on the right side)...
http://www.csszengarden.com/
My own site supports multiple themes which you can instantly change without even reloading the page...
http://www.jabcreations.com/blog/?prompt=themes-official
1.) Tables are intended for tabular data only, think the nutrition panels on food labels if you're not sure where to start. Tables are great for tabular data because it removes the formatting issues however you should never put non-tabular content in to tables as it disrupts the context of the content to search engines and you should instead use division elements instead since non-tabular data tends to do anything except for be presented in a tabular fashion.
2.) The context of using either CSS background-images or (X)HTML img (image) elements comes down to what you're trying to do.
2.A.) CSS3 allows the use of multiple background-images however browser support isn't yet universal when considering browser market shares...
http://www.caniuse.com/#search=css3%20multiple%20backgrounds
...as time passes however IE8 and other older browsers that do not support this modification to the CSS background-image property will slowly disappear so it will only become an increasingly viable option.
2.B.) You can combine an img element and a CSS background-image together to get two images to display inside of a single element.
2.C.) You can use two division elements with the same styling (or lack thereof) and then give them each a CSS background-image.
Here is the generally relevant CSS code...
background-image: url(kittens.png);
/* Choose one or the other below */
background-position: right bottom;
background-position: center center;
I'll reiterate that tables for on-tabular data is exceptionally bad for styling. Once you begin to grasp how CSS works (cascading means rules on lower lines override earlier lines, so the same rule on line 10 will override the same rule on line 9, if they are the same rule).
By using CSS you're going to have so much more power to quickly implement changes across your entire site and you'll be able to implement changes quicker and move on to more important things.
I coded an html email, and just tested in Gmail. Everything shows up fine besides for a background image. I put the background image on my wrapper table, like this:
<table cellpadding="0" cellspacing="0" border="4px solid grey" align="left" background="http://www.totalrecallsolutions.com/corporate/email templates/images/appt_reminder_one_bg.jpg">
And still, there is no image showing up in Gmail. I understood from my google searches that this is the correct way to make a background image show up in Gmail. So why is it not showing up?
Thanks!!
Besides the url with spaces, there's another thing, Gmail doesn't allow url() attribute in inline css
Don't use background images. Gmail, among others, will ignore any
url() attribute in an inline style, and the simple background= tag
attribute. You can use background colors if you wish (bgcolor tag
attribute or background-color: css statement).
Here is the link where I read that: http://groundwire.org/support/articles/css-and-email-newsletters
Regards
Gmail has added support for background and background-image properties last February (according to Campaign Monitor).
But in order for it to show, your code must contain at least one < img > tag. You can use spacer.gif to trick it (or any transparent image for that matter).
In my case I had CSS styles defined for background-repeat and background-size in a style tag that was being transformed to a single inline background: no-repeat/cover that was overriding the background attribute for my table. Using just [table background="image-url"] worked for me
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.
Suppose, I create a calendar as HTML table where different cells have different background color and different text. It looks nice on screen.
I realized that it is not possible to print this table preserving the cell's background color.
Instructing my viewers to tweak their browsers to print the calendar is just ridiculous.
Is there any trick to print HTML table as you see it on screen?
Maybe it is possible to somehow transform it to image, or something?
Here is a solution that I came up with.
Below is an illustration of creating printable 3x2 board, with 100pt x 100pt cells. I simplified the fragment as much as possible. Main idea: every cell has an image that is overlayed by text. This is much more slower than having simple background color, but allow having single codebase for screen and printing. You can get rid of inner spacing with additional styling.
<table style="table-layout:fixed; width:300pt; height:200pt; border-collapse:collapse; line-height: 0;">
<tr>
<td>
<img src="Content/images/backTab.png" style="width:100pt; height:100pt; position:relative; z-index:0" />
<div style="position:relative; top:-50pt; z-index:1; color:Red; text-align:center; ">Text</div>
</td>
I'm new in Web development and I found the whole situation being ridiculous. Thousands developers crying about printing of background color/image but nobody cares. I have looked at W3C HTML/CSS/Printing standards. There is nothing there about suppressing backgrounds on printing. If browsers make decision to save user's ink, there must be CSS style to explicitly enforce the background printing. In this case there will be no stupid difficulties to show and print chess board, or crossword puzzle, or calendar.
If anyone has connections in W3C, please, let them know.
You can create a css file and specify it in the html that it should be used for printing:
http://www.alistapart.com/articles/goingtoprint/
However, settings such as printing it as you see it on the screen require settings to be changed in the web browsers print settings.
Unfortunately there is no way around this without a custom solution.
You can play with Prototype Javascript and assign the HTML to canvas element which will create an image on the client side.
http://prototype-graphic.xilinus.com/
Hope this helps,
Jeffrey Kevin Pry
Couldn't you use 10x10 images with the background color you're thinking of and have them set to repeat across the background using CSS? (Fixed color images are very easily compressible and tend to be small, don't worry about the size as pointed out in the comments).
Also, in addition to my comment you can try to use: http://iecapt.sourceforge.net/
update: Also, this article probably can be helpful. http://www.codeproject.com/KB/graphics/html2image.aspx