I'm using jQuery to dynamically adjust the background image position of an element based on screen resolution. Here's the code:
var pwwidth = $(window).width();
var pwheight = $(window).height();
var bg1posx = pwwidth - $('h1.portofolio').width();
var bg1posy = pwheight - $('.footer').height();
var bg2posx = $('.leftporto').width() - (pwwidth * 0.05);
var bg2posy = ($('h1.portofolio').height() / 2 ) + $('h1.portofolio').css('margin-top').replace('px', '');
$('#content4').css('background-position', bg1posx+'px' bg1posy+'px', bg2posx+'px' bg2posy+'px');
In CSS, you can change multiple backgrounds of an element like this:
background-position: 100px 200px , 300px 400px;
background-position: 10% 20% , 30% 40%;
However, I'm having trouble defining it to change with jQuery as my current approach is not working:
$('#content4').css('background-position', bg1posx+'px' bg1posy+'px', bg2posx+'px' bg2posy+'px');