Background changing depending on title.

[the grim axel]

I'm trying to write a code that will use css to change the background of a page dependent on the page title. The image used for the background has the same title as the page. I was trying to use the document.write code to write a css tag that sayed

<style>#content{background-image:url(images/{imagenamehere}.jpg);</style>

Can anyone help me with this?

[the grim axel]

The javascript I have so far is as follows.

function background(){
var name = document.title;
var code = "<style>#content{background-image:url(/images/" + name + ".jpg);background-repeat:repeat-y;background-position:right;background-attachment:fixed;</style>";
document.write(code);}
 

This is inside a script tag in the header and I call the background() function onLoad. Can someone tell me what I'm doing wrong?

[mrhoo]

Why don't you use a css style element in the page for this?

[acoder]

You can't use document.write after the page has loaded, because the document is closed for writing.

mrhoo's suggestion is the correct way of solving this, e.g.

var code = "<style>#content{background-image:url(/images/" + name + ".jpg);background-repeat:repeat-y;background-position:right;background-attachment:fixed;</style>";

becomes

var content = document.getElementById("content");
content.style.backgroundImage = "url(/images/" + name + ".jpg);";
content.style.backgroundRepeat = "repeat-y";
// background-position = style.backgroundPosition, background-attachment = style.backgroundAttachment

[the grim axel]

Thank. I didn't know you could access the CSS styles from javascript.

[acoder]

Thank. I didn't know you could access the CSS styles from javascript.

See what you can change.