469,306 Members | 2,376 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,306 developers. It's quick & easy.

script to set page bg image

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.
Jul 23 '05 #1
2 2360
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.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 23 '05 #2
William Starr Moake wrote:
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
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

12 posts views Thread by bhennon | last post: by
2 posts views Thread by Dennis | last post: by
9 posts views Thread by Flynn | last post: by
1 post views Thread by Russ | last post: by
6 posts views Thread by sarika | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by harlem98 | last post: by
1 post views Thread by Geralt96 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.