Position a CSS Background Image X Pixels from the Right

Background image x px from right edge

CSS3 redefines the background-property so that you can say:

background-position: right 13px top; 

However browsersupport isn't the best atm.

To work around this, you can:

• add transparent pixels to the image itself and positioning it top right
• or calculate the position with javascript after the element's width is known

EDIT: You can safely use this feature now.

Offset a background image from the right using CSS

I found this CSS3 feature helpful:

/* to position the element 10px from the right */
background-position: right 10px top;

As far as I know this is not supported in IE8. In latest Chrome/Firefox it works fine.

See Can I use for details on the supported browsers.

Used source: http://tanalin.com/en/blog/2011/09/css3-background-position/

Update:

This feature is now supported in all major browsers, including mobile browsers.

HTML background image offset by x pixels from the center

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.

Can I position my CSS background to bottom minus x pixels ?

Yes, with the four-value syntax of the background-position property.

Presentation

// This two-value declaration
background-position: center bottom
// Is equivalent of this four-value declaration
background-position: center 0px bottom 0px

Disclaimer: the support is Chrome 25+, Firefox 13+, IE9+, Safari 7+

In your case

So you can position your background to "bottom minus 100px":

background-position: center bottom -100px

Example:

.container {  height: 190px;  padding: 1em;  margin: 0 auto 1em;  border: 1px solid #333;  text-align: center;    background-image: url('http://lorempixel.com/200/140/city/4');  background-repeat: no-repeat;  background-position: center bottom;}.plus {  background-position: center bottom 20px;}.minus {  background-position: center bottom -20px;}

<div class="container">    background-position:<br>    center bottom</div><div class="container plus">    background-position:<br>    center bottom 20px</div><div class="container minus">    background-position:<br>    center bottom -20px</div>

#page {
  height: 800px;
  position: relative;
  z-index: 0;
}

#page:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 200px 0 0 0; /* the height of the header here */
  background: conic-gradient(from 90deg at 1px 1px, #0000 90deg, rgba(74, 131, 167, .20) 0) 0 0/10px 10px;
}

#header {
  background-color: #FFF;
  height: 200px;
  width: 50%;
  margin: 0 auto;
}

<div id="page">
  <div id="header">
    <p>Start the blue patterned area under this header block</p>
  </div>
</div>