BG issue

[Gaurav Grv Robinson]

@yariplus I am a noob and I am confused. What goes in the header and what part is to be called ?

Putting the entire following thing does not work.

<script>
$(function(){
function ChangeIt(){
var num = Math.ceil( Math.random() * totalCount );
document.body.background = '/images/bgimages/'+num+'.jpg';
document.body.style.backgroundSize = '50 0%%';
document.body.style.backgroundRepeat = 'fixed';
document.body.style.backgroundAttachment='fixed';
document.body.style.MozBackgroundSize = 'cover';
document.body.style.backgroundSize = 'cover';
}

// Initial load.
if (app.template === 'login' || app.template === 'register') ChangeIt();

// New page loading.
$(window).on('action:ajaxify.start', function (ev, data) {
if (data.url === 'login' || data.url === 'register') {
ChangeIt();
} else {
document.body.background = "#f0f0f0";
}
});
});
</script>

[yariplus]

@Gaurav-Grv-Robinson

document.body.background is actually a url. If you want a color, try changing it to document.body.style.background

[Gaurav Grv Robinson]

@yariplus said in BG issue:

document.body.style.background

Duly noted. Btw the entire above mentioned code has to go in the header, right ?

[yariplus]

I put it in the Custom Header section in the acp.

It should work the same if you put it in header.tpl, near the useCustomJS tag

[Gaurav Grv Robinson]

@yariplus put the entire code in the custom header section, still does not work.

<script>
$(function(){
function ChangeIt(){
var num = Math.ceil( Math.random() * totalCount );
document.body.background = '/images/bgimages/'+num+'.jpg';
document.body.style.backgroundSize = '50 0%%';
document.body.style.backgroundRepeat = 'fixed';
document.body.style.backgroundAttachment='fixed';
document.body.style.MozBackgroundSize = 'cover';
document.body.style.backgroundSize = 'cover';
}

// Initial load.
if (app.template === 'login' || app.template === 'register') ChangeIt();

// New page loading.
$(window).on('action:ajaxify.start', function (ev, data) {
if (data.url === 'login' || data.url === 'register') {
ChangeIt();
} else {
document.body.style.background = "#f0f0f0";
}
});
});
</script>

[Gaurav Grv Robinson]

@yariplus corrected a stupid mistake and it seems to work now. But there is yet another issue, if any other page is opened first except the login/register page and if from that page the login/register pages are accessed, they get the same bg i.e the one without an image.

[yariplus]

@Gaurav-Grv-Robinson

Try not using document.body.background

use
document.body.style.background = "url(http://theurl/image.png)"

[Gaurav Grv Robinson]

@yariplus said in BG issue:

document.body.style.background = "url(http://theurl/image.png)"

document.body.style.background = "url('/images/bgimages/'+num+'.jpg');
does not work.

but
document.body.background = '/images/bgimages/'+num+'.jpg';
works

[yariplus]

@Gaurav-Grv-Robinson

document.body.style.background = 'url(/images/bgimages/'+num+'.jpg)';

[Gaurav Grv Robinson]

@yariplus WOW! You're the man. It seems to be working fine.