Q:

Multiple background images, not all centered

I'm trying to add multiple background-images to a DOM element (a td) using CSS.  I can specify multiple background images that stack on top of each other like so:
td{
    background-image: url("img1.svg"), url("img2.svg");
}

This results in img2 being stacked on top of img1.  However, I need to specify that one background image should be off-center, while the other centered.  Is there a way to do this in CSS, or will I need to get fancy to do this? 

A:

You just do the same with the position rule:
td{
    background-image: url("img1.svg"), url("img2.svg");
    background-position: center center, left top;  /* or */
    background-position: center center, 0px 0px;   /* x y */
}

The first apply to the first image, the second to the second image and so forth. 
For more details:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

