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

I believe I have a solution that achieves what you're wanting:

A background image (specifically a page background) offset by a number of pixels with respect to the center.

This works using only HTML & CSS - no javascript required.

---

Update

This can now be easily achieved using background-position and calc as a CSS unit.

The following CSS will achieve the same outcome as the previous solution (see "Original Solution" below):

#background-container {
    width: 100%;

    background-image: url("background-image.png");
    background-position: calc(50% - 50px) 50%;
    background-repeat: no-repeat;
}

Note: Don't use this method if you require support for legacy versions of IE.

---

Original Solution

#background-container {
    width: 100%;
    left: -100px; /* this must be TWICE the required offset distance*/
    padding-right: 100px; /* must be the same amount as above */

    background-image: url("background-image.png");
    background-position: center;
    background-repeat: no-repeat;
}

What this does is moves the entire container horizontally by the amount specified (in this case to the left 100px). Because the background image is centered relative to the container it moves to the left with the container.

The padding fixes the 100px of blank space that would appear to the right of the container as a result of the move. Background images show through padding). Because browsers use the border-box value instead of the default content-box value to calculate background sizing and positioning, the background image is effectively moved back to the right 50px - half the distance of the padding. (Thanks to ErikE for clarification).

So your offset/padding must be twice the required offset distance.

I have prepared a sample page for you here: http://www.indieweb.co.nz/testing/background-offset-center.html

Have a play with resizing the window. You will see that the purple and blue background image (laid over a deeper background image marking the center of the page) remains exactly 50px (half the offset/padding distance) to the left of the page center.

---

Answer 2

Nice answer Luke,

one more thing, if your block width is larger than screen resolution, your must put your block in another container and do this:

#container{
  position:relative;
  overflow:hidden;
}

#shadowBox{
  width: 100%;
  left: -100px; /* this must be TWICE the required offset distance*/
  padding-right: 100px; /* must be the same amount as above */
  background-image: url("background-image.png");
  background-position: center;
  background-repeat: no-repeat;
  position:absolute: /*this is needed*/
}

Answer 3

So you want it centered by shifted 50 pixels to left. I would add the 50 pixels to the image in the form of a transparent space, unless you are dealing with absolute dimensions.