#target {
     background: url("/images/center-stage.jpg") no-repeat;
     background-position: 0 0;
}

function colorChange(x,y)
{
    var x=("x" + px); // i don't get how to format this stuff
    var y=("y" + px);
    document.getElementById("target").style.backgroundPosition="(,)"; // this doesn't really go here, does it?
}

<a href="#" onclick="colorChange(0,50)"><img src="/images/swatches/red.jpg"></a>
<a href="#" onclick="colorChange(0,100)"><img src="/images/swatches/yellow.jpg"></a>
<a href="#" onclick="colorChange(0,150)"><img src="/images/swatches/blue.jpg"></a>
<a href="#" onclick="colorChange(0,200)"><img src="/images/swatches/green.jpg"></a>

function colorChange(x,y) {
    document.getElementById("target").style.backgroundPosition=x+'px '+y+' px';
}

function colorChange(x,y)
    {
        var x=("x" + px); // i don't get how to format this stuff
        var y=("y" + px);
        document.getElementById("target").style.backgroundPosition="(,)"; // this doesn't really go here, does it?
    }

document.getElementById("target").style.backgroundPosition=x+'px '+y+' px';

document.getElementById("target").style.backgroundPosition=x+' '+y

$("#target").css('background-position', x+'px '+y+'px');

// variable outside of function() scope
var xposition,
     yposition;

// Update values of xposition and or yposition
function updatePositions(axes) { // Should be {x:0,y:0}
    // Check to see which axis was passed in x, y or both, then update values
     if (typeof(axes.x) !== 'undefined') xposition = axes.x;
     if (typeof(axes.y) !== 'undefined') yposition = axes.y;

//Call function to actually move BG image
colorChange();
}

// Function move BG image, using variables declared above
function colorChange() {
    // Use xposition and yposition which are changed by JS function above
    $("#target").css('background-position', xposition+'px '+yposition+'px');
}

$(document).ready(function() {
    updatePositions({x:0,y:0}); // Initialize to starting position
});

var obj = {};
obj.x = 150;
obj.y = 200;
console.log(obj);

<a href="#" onclick="updatePositions({x:0,y:50})"><img src="/images/swatches/red.jpg"></a>
<a href="#" onclick="updatePositions({x:0,y:100})"><img src="/images/swatches/yellow.jpg"></a>
<a href="#" onclick="updatePositions({x:0})"><img src="/images/swatches/blue.jpg"></a>
<a href="#" onclick="updatePositions({y:200})"><img src="/images/swatches/green.jpg"></a>

function colorChange(x,y)
        {
            var positionX = x + "px";
            var positionY = y + "px";
            document.getElementById("target").style.backgroundPosition = positionX + " " + positionY;
        }