1

How can tell my css code that the source of a background image is a LinkedResource ?

Adding it as an <img src="cid:Photo0" /> is working, but I'm not able to style it in the way I want.

I've tried this css background-image:'cid:Photo0' this background-image:url('cid:Photo0') and other combinations of quotes and double quotes, but the linked resources will appear as attachments this way, and the div with this css codes will be either missing the background-image or sometimes will look like this:

<DIV cid:Photo0?);margin:70px0px;padding:0px0px;background-attachment:fixed;background-repeat:no-repeat;text-align:center;margin:auto;?="">

Where originally, it was written like this:

<div style="background-image:'cid:Photo0';margin:70px 0px;padding: 0px 0px;background-attachment:fixed;background-repeat:no-repeat;text-align:center;margin:auto; ">
sameh.q
  • 1,691
  • 2
  • 23
  • 48

2 Answers2

2

Try this:

<div style="background-image: url(cid:Photo0);margin:70px 0px;padding: 0px 0px;background-attachment:fixed;background-repeat:no-repeat;text-align:center;margin:auto;" />

This answer is fixing the CSS, but there seems still to be problems remaining, here is a relevant thread: Embedding background images in an e-mail

Edit:

After small brain storming and discussion, it appears that this is not supported in css, plus most applications for viewing emails won't render some css correctly anyway.

Community
  • 1
  • 1
Nico O
  • 13,762
  • 9
  • 54
  • 69
  • I've tried that, didn't work, this is how it will look:`
    `
     – sameh.q Feb 26 '14 at 10:36
  • `
    `
     – sameh.q Feb 26 '14 at 10:37
  • if `` worked `cid:{0}` must hold an url to the image. iL## update my answer – Nico O Feb 26 '14 at 10:39
  • so have you tried the solution without quotes? You either use no quotes or quotes for `background-image: url();` cid:Photo0 must of curse be parsed as the required url. – Nico O Feb 26 '14 at 10:46
  • also didn't work, it came like an attachment, and the div is not showing a background although it is there in the html `
    `     – sameh.q Feb 26 '14 at 10:46
  • So the problem is `cid:Photo0` is not getting resolved to the required URL. I've just played around with C# so far. So sorry for the guessing. What happens, when you write it like this: `"
     – Nico O Feb 26 '14 at 10:48
  • I use String.Format, this will get me the same result if I used string concatenation – sameh.q Feb 26 '14 at 10:51
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/48461/discussion-between-nico-o-and-simsim) – Nico O Feb 26 '14 at 10:54
1

The best solution I have found is:

style="background:url(data:image/jpg;base64,{CONTENT-BASE64})"
  • If the image is not JPEG change 'image/jpg' to suit the image format.
  • Substitute {CONTENT-BASE64} with the image file content in Base64.
JupiterDev
  • 11
  • 1
  • The problem is not with showing the image, it is the CSS associated to it in the sent email. most of the CSS tags are either not working or not working correctly inside the email message. but thanks, i will try your suggested solution – sameh.q Mar 29 '16 at 05:07