HTML background image offset by x pixels from the center

Question

I\'d like to put an image as the background of a webpage but have it offset by some number of pixels with respect to the center.

How can I do this?

I want:

Answer 1

Using background-position: center; is the same as background-position: 50% 50%;.

So you can use calc to do some simple math in CSS as a replacement for any length value, for example:

background-position: calc(50% - 50px) 50%;

Will center the background image, but shift it 50 pixels to the left.