background script: start with a bg and place img bottom right

@friggateJul 24.2009

I have modified ~~[URL=”http://www.codebelly.com/javascript/backimagechange.html”]~~this[/URL] script to what I think I will need, it simply allows for links to change the background of the webpage. But I need to change it so that when the page loads a default image is loaded, not just a blank white page – that was never in the original code.

Further, the images tile, which is fine for the orange stripe, I need that, but for the finger I would like it to be in the bottom right hand corner only. How can I mod the code to do this?

as for req 1 I tried setting the CSS bg to the orange stripes but this overrode the javascript and the bg would not change.

~~[url]~~http://www.projectmio.com/clockwork3.html[/url]

Thanks..

to post a comment

JavaScript

9 Comments(s) _↴

@hoangkcJul 25.2009 — #call changeBGImage(0) in onload method,

<i>
 </i>onload = function(){changeBGImage(0)}
 or 
 &lt;body onload="changeBGImage(0)"&gt;
 ...

and add style for orange stripe image, may be [B][I]style="position:fixed;bottom:5px;right:5px"[/I][/B] and it's always there

@friggateauthorJul 25.2009 — #Thanks, just not sure where to put in my code:

style="position:fixed;bottom:5px;right:5px"

Thanks again.

@hoangkcJul 25.2009 — #it's attribute of orange sripe image:

<a href="javascript:changeBGImage(0)"><img src="http://www.projectmio.com/stroke_col.png" [COLOR="Red"]style="position:fixed;bottom:5px;right:5px"[/COLOR]></a>

By the way, I have just seen your source at

http://www.projectmio.com/clockwork3.html

<i>
 </i>...
 &lt;body onload="changeBGImage(0)"&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;script language="JavaScript"&gt;
 ...

You shouldn't use 2 body tags, just one, and it shouldn't be put inside head tag

@friggateauthorJul 25.2009 — #Thanks for the correction, no I meant the background thumb usb img (http://www.projectmio.com/thumbs.jpg) to be place without repeat and at the bottom right, not the circular button which changes the background.

Sorry about that misunderstanding.

@hoangkcJul 25.2009 — #use Css: [B][I]background-repeat: no-repeat[/I][/B] (see more detail here: http://www.w3schools.com/css/css_background.asp)

or use javascript: [B][I]element.style.backgroundRepeat = "no-repeat";[/I][/B]

<i>
 </i>function changeBGImage(whichImage)
 {
 if (document.body)
 {
 document.body.background = backImage[whichImage];
 }
 document.body.style.backgroundRepeat = whichImage? "no-repeat" : "repeat";
 }

to place it somewhere, use [B][I]backgroundPosition[/I][/B] property

@friggateauthorJul 25.2009 — #Its really strange, the image does stop repeating which I think is because of the line you used:

document.body.style.backgroundRepeat = whichImage? "no-repeat" : "repeat";

But that is different to:

element.style.backgroundRepeat = "no-repeat";

AND

background-repeat: no-repeat

I ended up using: document.body.style.backgroundPosition="right";

because I thought it looked like the one in use, it does seem to want to work, but when I specify say "bottom right" it will not show on the page, but when I use "top left" it does.

I tried placing that in the body on its own and its either did not work or the image won't show.

@friggateauthorJul 25.2009 — #I don't know that this should do this but when I type:

document.body.style.backgroundPosition = "bottom left";

it seem to make the picture appear at the top of the screen!

http://www.projectmio.com/clockwork3.html

..how to I get the bg to appear at the bottom right of the page.

@hoangkcJul 26.2009 — #For backgroundPostision to work in Firefox and Opera, the background-attachment property must be set to "fixed" when background to set to backImage[1].

But in this case, you can set them for body and don't care if backImage is 0 or 1.

Change your body tag to

<i>
 </i>&lt;body style="background-repeat: repeat; [COLOR="Red"]background-position: bottom right; background-attachment:fixed;[/COLOR]" onload="changeBGImage(0)" &gt;

and no need to set backgroundPosition in changeBGImage function

<i>
 </i>function changeBGImage(whichImage)
 {
 if (document.body)
 {
 document.body.background = backImage[whichImage];
 }
 document.body.style.backgroundRepeat = whichImage? "no-repeat" : "repeat";
 }

@friggateauthorJul 26.2009 — #Perfect, it all works. Many thanks for your considerable time!

Also in #JavaScript _↴

delete multiple text fields based on dropdown Submit the value selected in drop down prompt Drop Down Menu Links

Success!

Help @friggate spread the word by sharing this article on Twitter...

Tweet This

background script: start with a bg and place img bottom right

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

background script: start with a bg and place img bottom right

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴