[HTML per mail] Achtergrond in email niet fixed - Softwareontwikkeling

donderdag 12 oktober 2006 17:32

Acties:

Topicstarter

Voor een nieuwsbrief heb ik een achtergrond gemaakt. Nu wil ik dat deze achtergrond zichzelf niet iedere keer herhaalt, maar dat hij maar 1x voorkomt op de pagina.

Op één of andere manier krijg ik dat maar niet voor elkaar: wat ik al geprobeerd heb:

1. Achtergrond instellen via de <body> tag met BGPROPERTIES="fixed" : Outlook laat 'm gewoon meerdere keren zien.
2. Achtergrond instellen via css en via div="stijl" proberen de achtergrond te toten: Geen achtergrond...
3. Door middel van een span met style:
<span style='position: absolute; z-index:-1; margin-left:0px; margin-top:0px;'><img src="http://server/plaatje.jpg"></span> : Hiermee wordt de afbeelding getoond, maar begint de tekst pas onder het plaatje.

Heeft iemand hier ervaring mee?

Even wat extra info:
- de mail wordt via internet aangemaakt en verstuurd (YaNC component icm Joomla)
- daarmee kan ik geen bijlagen versturen.
- de achtergrond zal standaard in de template moeten zitten; ik wil de gebruikers niet opzadelen met het iedere keer toevoegen van een afbeelding via de tinymce editor.

[ Voor 17% gewijzigd door SysRq op 12-10-2006 17:34 ]

-

donderdag 12 oktober 2006 17:35

Acties:

Verwijderd

Wat is div="stijl" in godsnaam?

<body style="background: url(plaatjes.gif) fixed">

donderdag 12 oktober 2006 17:39

Acties:

SysRq

Topicstarter

Verwijderd schreef op donderdag 12 oktober 2006 @ 17:35:
Wat is div="stijl" in godsnaam?

Gewoon: eerst een css style aanmaken in de head met als id stijl, vervolgens <div class="stijl"> gebruiken...

Ow, ik zie nu dat ik hier in mijn voorbeeld de class vergeten ben, dit staat er normaal wel.

<body style="background: url(plaatjes.gif) fixed">

Ga ik even proberen... Dit werkt dus niet: de achtergrond wordt gewoon meerdere keren getoond. Ook daar de no-repeat ingeven werkt helaas niet.

[ Voor 12% gewijzigd door SysRq op 12-10-2006 17:41 ]

-

donderdag 12 oktober 2006 17:42

Acties:

Verwijderd

SysRq schreef op donderdag 12 oktober 2006 @ 17:39:
[...]

Gewoon: eerst een css style aanmaken in de head met als id stijl, vervolgens <div class="stijl"> gebruiken...

Wanneer je HTML in een e-mailbericht wilt stijlen kan dat alleen middels de inline STYLE-attribuut. Vraag me niet waarom, maar het kan dus niet in HEAD sectie geplaatst worden. Hetzelfde geld voor externe stylesheets.

donderdag 12 oktober 2006 17:47

Acties:

moozzuzz

1.
De HTML die je uitspuugt, is die door een browser te verteren?

2.
If so, bemerk dat email-clients geen browsers zijn en zodoende vaak maar een beperkte html-render-ondersteuning hebben. Ik raad in die gevallen steeds aan: kijk hoe een andere mailinglist-prog het doet (of mailinglists die bij je in de mailbox vallen).

donderdag 12 oktober 2006 17:50

Acties:

Verwijderd

Ik heb niet echt de zin en tijd om het allemaal uit te zoeken, dus hier nog een gokje:

<img style="position: absolute; z-index:-1" src="http://server/plaatje.jpg">

Andere versie van jouw idee, maar dan zonder die span die je toch niet nodig hebt.

donderdag 12 oktober 2006 17:55

Acties:

crisp

Devver

Pixelated

background-repeat: no-repeat zou nochthans gewoon moeten werken; een img-element absolute positioneren en dan ook nog een negatieve z-index geven is not the way to go (afgezien van het feit dat niet alle UA's goed kunnen omgaan met negatieve z-index)

Intentionally left blank

donderdag 12 oktober 2006 17:57

Acties:

moozzuzz

Verwijderd schreef op donderdag 12 oktober 2006 @ 17:50:
HTML:
1
<img style="position: absolute; z-index:-1" src="http://server/plaatje.jpg">

Het lijkt me dat z-index niet ondersteund wordt, zie probleem bij een <span>.

[ Voor 0% gewijzigd door moozzuzz op 12-10-2006 17:59 . Reden: En opm van Crisp :P ]

donderdag 12 oktober 2006 18:41

Acties:

SysRq

Topicstarter

Verwijderd schreef op donderdag 12 oktober 2006 @ 17:42:
[...]
Wanneer je HTML in een e-mailbericht wilt stijlen kan dat alleen middels de inline STYLE-attribuut. Vraag me niet waarom, maar het kan dus niet in HEAD sectie geplaatst worden. Hetzelfde geld voor externe stylesheets.

Inderdaad, dat heb ik ook gemerkt.

crisp schreef op donderdag 12 oktober 2006 @ 17:55:
background-repeat: no-repeat zou nochthans gewoon moeten werken;

Tja, daar was ik ook van overtuigd, maar helaas werkt dit dus niet. (I.i.g. niet op Office 2003 en Office 2007). Ik krijg dan gewoon geen afbeelding te zien. Zodra ik die background-repeat:no-repeat weghaal werkt het wel.

Hoe ik het nu dus heb:

HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.server/template.css" />
<base href="http://www.server.nl/" />
</head>
<body style="background: url(http://www.server/backnieuwsbrief.jpg) background-repeat:no-repeat">
<div class="tekst">
<table border="0" cellpadding="0" cellspacing="0" style='padding-top: 130pt;' >
<tr valign="top">
<td>
Deze Nieuwsbrief is een uitgave van ....
</td>
<td width="250" style='width:336pt; margin: 5px;'>
[CONTENT]
</td>
</tr>
</table>
</div>
</body>
</html>

[ Voor 27% gewijzigd door SysRq op 12-10-2006 18:44 ]

-

donderdag 12 oktober 2006 21:53

Acties:

moozzuzz

Lijkt me speciaal inet-adres + XHTML-syntax in een HTML-document...

HTML:

1	<link rel="stylesheet" type="text/css" href="http://www.server/template.css" />

Mss toch even de breedtes nakijken...

HTML:

1
2
3

<td width="250" style='width:336pt; margin: 5px;'> 
[CONTENT] 
</td>

Heb je al background-repeat: no-repeat; gebruikt ipv de 'verkorte' background notatie?

[ Voor 13% gewijzigd door moozzuzz op 12-10-2006 21:55 ]

donderdag 12 oktober 2006 23:02

Acties:

SysRq

Topicstarter

moozzuzz schreef op donderdag 12 oktober 2006 @ 21:53:
Heb je al background-repeat: no-repeat; gebruikt ipv de 'verkorte' background notatie?

Yep, helaas met hetzelfde resultaat: Outlook geeft de e-mail dan zonder achtergrond weer.

-

donderdag 12 oktober 2006 23:35

Acties:

crisp

Devver

Pixelated

Je mist ook een puntkomma tussen de (generieke) background property en de background-repeat property. Het moet zo:

Cascading Stylesheet:

1	background: url(http://www.server/backnieuwsbrief.jpg) no-repeat;

of zo:

Cascading Stylesheet:

1 2	background-image: url(http://www.server/backnieuwsbrief.jpg); background-repeat: no-repeat;

Intentionally left blank

maandag 16 oktober 2006 15:14

Acties:

SysRq

Topicstarter

Hmm, bedankt voor het antwoord, helaas is dit niet de oplossing. Ik heb beide geprobeerd, maar helaas zie ik geen achtergrond.

Zodra ik de repeat weghaal die ik wel de achtergrond, maar dan wordt hij dus herhaald...

-

maandag 16 oktober 2006 15:27

Acties:

Genoil

Als ik HTML mail maak gebruik ik alleen CSS als optie, d.w.z. ik laat geen kritieke layout dingen van CSS afhangen. Menig webmail-client sloopt het eruit, en bij replyen of forwarden via Outlook gaat het ook vaak mis met CSS. Body backgrounds moet je sowieso nooit gebruiken in HTML mail omdat sommige webmail clients ook de hele bodytag eruit slopen. Dat is ook de reden dat je niets in een HEAD element moet stoppen want dat gaat vaak ook overboord.

Dan hangt het verder een beetje van het ontwerp van je nieuwsbrief af, maar de meeste dingen kunnen gewoon met ouderwets aanmodderen met table/td backgrounds.

maandag 16 oktober 2006 20:54

Acties:

sQuarecoW

I'm with ^^ ..

iedere email client verneukt geeft het weer op zn eigen manier.. Als het niet persé nodig is, zo weinig mogelijk css met plaatjes en maten..

maandag 16 oktober 2006 22:31

Acties:

SysRq

Topicstarter

Ok, css overboord, en weer met tabellen gaan werken.

Ik laat nog wel even weten of het op deze manier wel lukt.

-