Change html background on refresh with javascript

Question

I want to change my background image of my html on every refresh.

This is what i got in my CSS

html { 
    background-repeat:no-repeat;
    background-position:center center;
    background-attachment:fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

and this is what i got with javascript (in a separate js file) :

var totalCount = 6;
function ChangeBackground()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.parentNode.background = 'background/test/'+num+'.jpg';

}

i call my function at the end of my html :

<script type="text/javascript">
ChangeBackground();
</script>

I cannot add a background on html tag with the javascript-code i have. Is there any other way?

i want it specifically on the html tag, because i think thats better:

We can do this purely through CSS thanks to the background-size property now in CSS3. We'll use the html element (better than body as it's always at least the height of the browser window). We set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword.

http://css-tricks.com/perfect-full-page-background-image/

I cannot add a background on html tag with the javascript-code i have. Is there any other way? — user1386906
– user1386906, Commented Nov 24, 2012 at 14:44
Updated example, showing the background switching - jsfiddle.net/8wGYF/2 (hit "Run" for a refresh); — Paulo R.
– Paulo R., Commented Nov 24, 2012 at 16:58

extramaster · Accepted Answer · 2012-11-24 16:29:29Z

2

Try setting the background-image style property value to a url instead of directly specifying the link

ie: Use document.body.parentNode.style.backgroundImage = 'url(background/test/'+num+'.jpg)'; instead of document.body.parentNode.background = 'background/test/'+num+'.jpg';

JSFiddle: http://jsfiddle.net/HHeKK/

answered Nov 24, 2012 at 16:29

extramaster

2,6532 gold badges27 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

You cannot add background to a `<html>` tag!

Change your code this way:

document.body.style.backgroundImage = 'background/test/'+num+'.jpg';

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 24, 2012 at 14:14

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

1 Comment

user1386906 Over a year ago

is there no way that i can add a background to a html tag with javascript? Because here it says that its better on a html tag then a body tag: css-tricks.com/perfect-full-page-background-image

Collectives™ on Stack Overflow

Change html background on refresh with javascript

2 Answers 2

Comments

You cannot add background to a `<html>` tag!

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

You cannot add background to a <html> tag!

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related

You cannot add background to a `<html>` tag!