CODEWITHSUNDEEP
javascriptcss
Dan
Dan

Reputation: 85

Setting the background that works with background changing script

I have a script to change the background of a page when I hover over text, but how do I set the background when the page first loads?

Thanks if you can help.

html:

<div class="bg1">
<p style="background-image:url(http://i.imgur.com/tsvMD.jpg)" onMouseOver="bgChange('http://i.imgur.com/tsvMD.jpg')">001</p>
<p style="background-image:url(http://i.imgur.com/WoXUM.jpg)" onMouseOver="bgChange('http://i.imgur.com/WoXUM.jpg')">002</p>
<p style="background-image:url(http://i.imgur.com/Q5U1L.jpg)" onMouseOver="bgChange('http://i.imgur.com/Q5U1L.jpg')">003</p>
</div>

css:

.bg1 p {
display:inline;
font-size: 30px;
}

javascript:

function bgChange(bg)
{
document.body.background=bg;
}

Working example: http://jsfiddle.net/XXwXq/

Upvotes: 0

Views: 136

Answers (3)

Andreas Wong
Andreas Wong

Reputation: 60594

Use css.. ?

body {
    background-image:url(http://i.imgur.com/tsvMD.jpg);
}​

http://jsfiddle.net/XXwXq/13/

function bgChange(bg) {
   document.body.style.background="url(" + bg + ")";
}

Upvotes: 1

Vishal Suthar
Vishal Suthar

Reputation: 17194

Add this line below the bgchange function:

window.onload=bgChange('http://i.imgur.com/Q5U1L.jpg');

So it would be:

function bgChange(bg)
{
    document.body.background=bg;
}
window.onload=bgChange('http://i.imgur.com/Q5U1L.jpg');

Upvotes: 1

Jan Hančič
Jan Hančič

Reputation: 53929

Use CSS and the "background-image":

body {
  background-image:url(...)
}

Upvotes: 0

Related Questions