[JavaScript/CSS] Background-image valt buiten tabel

[Polderdijk]

Ik heb een stuk software gemaakt waarin mijn collega's een webpagina kunnen opmaken zonder enige kennis van HTML/CSS. Dit bestaald uit een tabel met daarin meerdere WYSIWYG HTML-editors. Via een menu optie kan de volledige pagina opgemaakt worden zoals lettertype, kleur, en nog een dikke 50-tal andere opties.
Als de gebruiker de pagina aan het opbouwen is, zorg ik middels een OnChange-functie dat de aanpassing direct te zien is in het 'voorbeeld' zodat er niet elke keer opgeslagen hoeft te worden om het voorbeeld te zien.

Zodra de pagina klaar is wordt het in een MSSQL database gepompt. Als dan de 'originele' pagina wordt opgevraagd wordt er d.m.v. een css.asp-include een CSS file gecreeerd vanuit de database. Dit werkt in alle browsers perfect! Op 1 ding na.

Het tabel ziet er ongeveer zo uit:

HTML:

<table id=BodyAlign border=0>
    <tr>
        <td id="BorderNavBovenKleur"><img border="0" src="Images/spacer.gif" width="1" height="1" id="BorderNavBovenHoogte"></td>
    </tr>
    <tr>
        <td id="Navigatie"><p align="center">Blabla</td>
    </tr>
    <tr>
        <td id="BorderNavOnderKleur"><img border="0" src="Images/spacer.gif" width="1" height="1" id="BorderNavOnderHoogte"></td>
    </tr>
</table>

Middels onderstaand script heb ik er voor gezorgd dat in de Id Navigatie een achtergrondafbeelding komt te staan:

JavaScript:

if(NavigatieAchtergrondKleur!='') document.getElementById('Navigatie').style.backgroundColor = NavigatieAchtergrondKleur;
if(NavigatieAchtergrondImage!='') document.getElementById('Navigatie').style.backgroundImage = 'url(/Images/' + NavigatieAchtergrondImage + ')';

if(NavigatieAchtergrondRepeat=='no-repeat') {
    document.getElementById('Navigatie').style.backgroundRepeat = 'no-repeat';
} else if(NavigatieAchtergrondRepeat=='repeat') {
    document.getElementById('Navigatie').style.backgroundRepeat = 'repeat';
} else if(NavigatieAchtergrondRepeat=='repeat-x') {
    document.getElementById('Navigatie').style.backgroundRepeat = 'repeat-x';
} else if(NavigatieAchtergrondRepeat=='repeat-y') {
    document.getElementById('Navigatie').style.backgroundRepeat = 'repeat-y';
}
if(NavigatieAchtergrondPosition=='') {
    document.getElementById('Navigatie').style.backgroundPosition = '';
} else if(NavigatieAchtergrondPosition=='top left') {
    document.getElementById('Navigatie').style.backgroundPosition = 'top left';
} else if(NavigatieAchtergrondPosition=='top center') {
    document.getElementById('Navigatie').style.backgroundPosition = 'top center';
} else if(NavigatieAchtergrondPosition=='top right') {
    document.getElementById('Navigatie').style.backgroundPosition = 'top right';
} else if(NavigatieAchtergrondPosition=='center left') {
    document.getElementById('Navigatie').style.backgroundPosition = 'center left';
} else if(NavigatieAchtergrondPosition=='center center') {
    document.getElementById('Navigatie').style.backgroundPosition = 'center center';
} else if(NavigatieAchtergrondPosition=='center right') {
    document.getElementById('Navigatie').style.backgroundPosition = 'center right';
} else if(NavigatieAchtergrondPosition=='bottom left') {
    document.getElementById('Navigatie').style.backgroundPosition = 'bottom left';
} else if(NavigatieAchtergrondPosition=='bottom center') {
    document.getElementById('Navigatie').style.backgroundPosition = 'bottom center';
} else if(NavigatieAchtergrondPosition=='bottom right') {
    document.getElementById('Navigatie').style.backgroundPosition = 'bottom right';
}
if(NavigatieAchtergrondFixed) {
    document.getElementById('Navigatie').style.backgroundAttachment = 'fixed';
} else {
    document.getElementById('Navigatie').style.backgroundAttachment = '';
}

Echter als ik een achtergrond afbeelding heb gekozen, dan valt deze 'buiten' het TD element van de tabel en blijkt hij als uitgangpunt de body van het document aan te houden. Als er als position top right is gekozen, staat de achtergrondafbeelding rechtsboven in de hoek (dus van de pagina zelf).

Na veel zoeken blijkt dat deze eigenschap eigenlijk klopt en dit te ondervangen is met de position:absolute optie. Echter trekt deze optie zich niks aan van de BackgroundImage.

Echter als ik de instellingen zijn opgeslagen en de pagina wordt via de CSS-file getoond, valt de achtergrond wel netjes in de cel.

De CSS die wordt gegenereerd:

Cascading Stylesheet:

.Navigatie {
    background-color: #FFFFFF;
    background-image: url('/Images/navigatie.jpg');
    background-position: top left;
    background-repeat: no-repeat;
    background-attachment: scroll;
    font-family: Verdana; 
    font-size: 12px;
    color: #000000;
    height: 20;
}

Op wat voor manier is het toch mogelijk om middels javascript de achtergrond afbeelding wel netjes in de cel te krijgen?

[Verwijderd]

Waarom gebruik je

if(NavigatieAchtergrondPosition=='') {
[...]
}

als je ook

code:

document.getElementById('Navigatie').style.backgroundPosition = NavigatieAchtergrondPosition;

kunt doen?