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:

background-image: url("bg.png");
background-position: 25% center;
background-attachment: fixed;
background-repeat: no-repeat;

but instead of 25%, I want something along the lines of "center - 50px". Is there any solution to this?

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

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.

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.

Answer 4

if you know the width of the image you can use this:

background-position: (BgWidth - 50)px 0px;

Note that you can't have it like that, i.e. you need to calculate (BgWidth - 50) and then write the number there.

If you don't know the width you can use Javascript(with-or-without jQuery) and then use this:

$(#ID).css('background-position', (BgWidth - 50)+'px 0px');

Answer 5

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 6

My answer gotta be too late but somehow I've found another solution.

padding-left: 100px; /* offset you need */
padding-right: 100%;

or

padding-right: 100px;
padding-left: 100%;

The examples have the same effect.

Answer 7

There's no obvious CSS answer. You would either need to use JavaScript to calculate values or do something tricky. You can try keeping the background-position:25% center and adding position:relative;left:-50px or margin-left:-50px but those might not work depending on how you are using the DOM element.

Answer 8

The only method I've found for this is to have the background inside another div, then use javascript to reposition ...

<style>
    body {
        width: 100%;
        overflow: hidden;
        }
    #bg {
        position: absolute;
        background: url(images/background.jpg) center top;
        }
</style>

<script>
    function recenter(){
        var $pos = $('#content').offset().left;
        $('#bg').css('left',$pos-580);
    }
    recenter();
    $(window).resize(function(){ recenter(); });
</script>

<body>
    <div id="bg"></div>
    <div id="content">
        blah
    </div>
</body>