script to set page bg image

  • Thread starter William Starr Moake
  • Start date
W

William Starr Moake

For an IE-based offline WYSIWYG editor I'm developing, I have added
javascript to insert images as table backgrounds and to set page
background color. But I can't get any script to work for setting a
page background image.

I use a form with a button input type="file" for the user to select a
page background image from his hard drive and a second button with
onClick to launch this script:

function backImg() {
var img = form2.imgurl.value;
var body = "<BODY style='background:" + img + "'>";
iView.focus();
iView.document.write(body);
}

But I get this HTML when the page is saved:

<BODY style="BACKGROUND: none"></BODY>

The MSHTML control is ignoring the var img input and it doesn't allow
access to the <head> section for CSS input. I've tried dozens of
variations of the script, but none work. Any ideas?

PS: I have to use BODY style= rather than body background= because
it's proprietary in MSHTML.
 
E

Evertjan.

William Starr Moake wrote on 13 jun 2004 in comp.lang.javascript:
function backImg() {
var img = form2.imgurl.value;
var body = "<BODY style='background:" + img + "'>";
iView.focus();
iView.document.write(body);
}

function backImg() {
var img = "url("+document.forms['form2'].imgurl.value+")";
iView.document.body.style.backgroundImage=img;
}

not tested.
 
T

Thomas 'PointedEars' Lahn

William said:
For an IE-based offline WYSIWYG editor I'm developing, I have added
javascript to insert images as table backgrounds and to set page
background color. But I can't get any script to work for setting a
page background image.
[...]
function backImg() {
var img = form2.imgurl.value;
var body = "<BODY style='background:" + img + "'>";
iView.focus();
iView.document.write(body);
}

But I get this HTML when the page is saved:

<BODY style="BACKGROUND: none"></BODY>

The MSHTML control is ignoring the var img input and it doesn't allow
access to the <head> section for CSS input. I've tried dozens of
variations of the script, but none work. Any ideas?

Try

var body =
"<BODY style='background-image:url(" + encodeURI(img) + ")'>";

instead because

<BODY style='background: foobar.png'>

is clearly invalid CSS, since 'foobar.png' is not a valid property
value. So it is highly likely that IE uses the default value "none"
instead.

Note that document.write() usually *overwrites* the document after
loading has finished, so that may not be the best approach. Provided
that the object referred to with "iView" provides an (incomplete)
implementation of W3C DOM Level 2, you could use

iView.document.body.style.backgroundImage =
"url(" + encodeURI(img) + ")";

which *preserves* the current content *and* changes the background image.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
474,141
Messages
2,570,814
Members
47,359
Latest member
Claim Bitcoin Earnings. $

Latest Threads

Top