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

Question

I need to position my background at the bottom of the screen. But on mobile device resolution I want to display it 100px lower than that, like "bottom minus 100px". Is it possible to achieve such a thing in CSS?

Answer 1

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>

See the MDN documentation