半页背景/列背景

Question

I'm running this JavaScript and CSS ( jsfiddle ) on this website ( animevid-other ) so what I need is to adapt the JavaScript and CSS to the column_sx or have the background centered on the left (where there's the column), is this possible?

I've found something that could have helped but I think it's not exactly what I need ( multiple-backgrounds-left-half-and-right-half ). So since I have not so much knowledge of JavaScript and just a few things about CSS, could you help me?

Edit : more details here http://i.imgur.com/DsF4q3M.png

Answer 1

You should set the background to colonna_sx instead of body. So add this to colonna_sx.

background-repeat: no-repeat;
background-position: center;
background-size: cover;

Then you should change the script. If you add jQuery you can change this.

 document.body.background ='http://adventureofucm.com/OtherSites/image_background/'+num+'.jpg';

to this.

var backgroundpic = 'http://adventureofucm.com/OtherSites/image_background/'+num+'.jpg';
$('.colonna_sx').css("background", "url(backgroundpic)");

Without jQuery.

document.querySelector('div.colonna_sx').style.backgroundImage = 'url(http://adventureofucm.com/OtherSites/image_background/' + num + '.jpg)';

This should work in most browsers (IE8 and up) http://caniuse.com/#feat=queryselector .