Christopher Thompson Christopher Thompson - 5 months ago 9
Javascript Question

Javascript random background top right fixed

I got the code working, basically. I am having trouble getting the image set to be top right on the site layout. It's defaulting to bottom right and that's not what I desire.

Any help on getting it so the image displays at the top right since I'm at a loss.

I bet it's something simple too. >.o

<script type='text/javascript'>
var bgColorArray = ['http://s33.postimg.org/5xlufyx6n/image.png','http://s33.postimg.org/y1sy7zkvz/BG2.png','http://s33.postimg.org/icmelisu7/BG3.png','http://s33.postimg.org/twvtrar9b/BG4.png','http://s33.postimg.org/xvy4urypr/BG5.png','http://s33.postimg.org/kpmh0h75r/BG6.png','http://s33.postimg.org/7d6aukl8f/BG7.png','http://s33.postimg.org/3xsf9m933/BG8.png','http://s33.postimg.org/4dhh7uz5r/BG9.png','http://s33.postimg.org/6kzi108lb/BG10.png','http://s33.postimg.org/3jmyfngjj/BG11.png','http://s33.postimg.org/55klqfkan/BG12.png'],
selectBG = bgColorArray[Math.floor(Math.random() * bgColorArray.length)];

document.body.style.backgroundImage = 'url(' + selectBG + ')';
</script>


As per requested here is the part of the CSS that's being effected:

Yeah sure, here's the CSS that's being effected:

html,body {
background: url(http://s33.postimg.org/7nk1hqiwv/Woosh2.png) right bottom fixed no-repeat, url(http://s33.postimg.org/nk9mmywjj/ONEMORETIME.png) left top fixed no-repeat, url(http://s33.postimg.org/xgapmm2bj/Left_Side_Repeat.png) left bottom fixed repeat-y, url(http://s33.postimg.org/k00q0gawv/6_Done.png) fixed repeat;
color:#FFF;
text-shadow:#000 1px 1px 0;
font-family: "Comic Sans MS", "Trebuchet MS", "Bitstream Vera Sans", "Verdana", sans-serif;
font-size: 12px;
margin: 0;
padding:0;
height: 100%;
}


As for the HTML it's on a forum host, Zetaboards. So the HTML is mostly automated.

Answer

You can also set the default background position through Javascript, like this:

document.body.style.backgroundPosition = 'right top'

It should be quite self-explanatory.

And you can see that it works here.

var bgColorArray = ['http://s33.postimg.org/5xlufyx6n/image.png', 'http://s33.postimg.org/y1sy7zkvz/BG2.png', 'http://s33.postimg.org/icmelisu7/BG3.png', 'http://s33.postimg.org/twvtrar9b/BG4.png', 'http://s33.postimg.org/xvy4urypr/BG5.png', 'http://s33.postimg.org/kpmh0h75r/BG6.png', 'http://s33.postimg.org/7d6aukl8f/BG7.png', 'http://s33.postimg.org/3xsf9m933/BG8.png', 'http://s33.postimg.org/4dhh7uz5r/BG9.png', 'http://s33.postimg.org/6kzi108lb/BG10.png', 'http://s33.postimg.org/3jmyfngjj/BG11.png', 'http://s33.postimg.org/55klqfkan/BG12.png'];
selectBG = bgColorArray[Math.floor(Math.random() * bgColorArray.length)];

document.body.style.backgroundImage = 'url(' + selectBG + ')';
document.body.style.backgroundPosition = 'right top';

Comments