How to Position a Background Image Relative to The Centre of an Element

Is there a way to position a background image relative to the centre of an element?

The css propoerty background-position accepts center as a value:

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

Or the shorthand version:

.myelem {
    background: url("myelem.png") center center no-repeat;
}

Update 1

There is no simple css way to set the background-position to an offset of center (or bottom or right).

You could add padding to the actual image, use javascript to calculate the position after page load, add margin to the element as suggested in the following SO questions:

HTML background image offset by x pixels from the center
Offset a background image from the right using CSS

Alternatively you can use calc to calculate the correct position. Although calc is not supported by all browsers at this point.

Using calc you could do something like this:

.myelem {
    background-image: url("myelem.png");
    background-position: 5% 60%;
    background-position: -webkit-calc(50% - 200px) 60%;
    background-position: calc(50% - 200px) 60%;
    background-repeat: no-repeat;
}

Demo

How to position an element relative to a specific background image object?

Edit: Coupled with what I wrote below, this should be what you're after :) All that is left to do is change the percentages to match the position you're after. If you need to move something in px you can use calc() css function to do

height: calc(100% - 100px);

This would make your thing 100% of the height - 100px.

body {      width: 100%;      height: 100%;      position:relative      background-image: url("http://www.rizwanashraf.com/wp-content/uploads/2008/11/mac-wallapers-13.jpg");      background-size: cover;      background-position: 0 0;      background-repeat: no-repeat;    }.title-container{      position: absolute;      top: 50%;      left:50%;      transform: translate(-50%, -50%);     }

<body>  <div class="title-container">    <h1>My Title</h1>  </div></body>

How to position an element relative to the background image width

As the background size changes according to the width of it's container, you can use percent margin to position the element. Percent Margins are calculated according to the width of the container, even top/bottom margin (see here).

example :

:hover + .hide{
    position:absolute;
    bottom:0;
    right:0;
    margin-bottom:20%; /* tune this */
    margin-right:20%; /* tune this */
}

Here is a DEMO

Position body background image relative to child div

You can fix your approach by using overflow-x:hidden; on the overflowed element or
try position absolute with display inline

How to position ::after background image into the center of the div?

You can use left: 50% with negative margin-left (half of logo width).

.header {  background-color: #000;  position: relative;  height: 200px;}
.header:after {  margin-left: -100px;  position: absolute;  background: #f00;  bottom: -100px;  height: 200px;  width: 200px;  content: ' ';  z-index: 2;  left: 50%;}

<div class="header"></div>

CSS Position Relative to background-img for inner div

If you want to scale the image with viewport without distorting it you can use aspect-ratio property:

* {
  margin: 0;
  padding: 0;
}

html,
body {
  background-color: rgb(78, 3, 78);
  overflow: hidden;
}

#outer {
  position: relative;
  background-color: rgb(78, 3, 78);
  background-image: url(https://i.stack.imgur.com/QhkFU.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: auto;
  width: calc(min(100vw, 120vmin - 10px));
  /* aspect ratio calculates the height */
  aspect-ratio: 1.2/1;
}

#inner {
  position: absolute;
  top: 21%;
  left: 22%;
  width: 42%;
  height: 40%;
  background-color: black;
  font: 2vmin monospace;
  color: limegreen;
}

<div id="outer">
  <div id="inner">
    <br>
  <p> Testing Terminal</p> > <span>ping www.google.com -t </span></div>
</div>

How to center an specific (x,y) point of a background image to a defined (x',y') coordinates of the CSS element that contains it?

Since you know the size of the background image (200x200), you can use half the amount of those pixel values as negative values for the background position in order to have the image's center exactly at the upper left corner of its div element. In your case, that would be background-position: -100px -100px;:

.foo {
  margin: 0 auto;
  width: 400px;
  height: 300px;
  background: url('https://source.unsplash.com/random/200x200') no-repeat, blue;
  background-position: -100px -100px;
}

<! -- Let's supose I would like to center the (50%, 50%) of that image placeholder at the (0,0) of the container div. -- >

<div class='foo'></div>

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.