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?

Audreyaudri

Are you using an background position property for your background or an image tag behind everything? Need to see your code. – Irrelative

You should add your HTML Markup with other CSS dependencies, it's more guessing than answering without it. – Varion

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

Quinta

You must be meaning : background-position: center bottom -100px; codepen.io/anon/pen/LGyLGN – Dieldrin

It depends in which way way you want to move background. – Quinta

well he was asking for bottom minus 100px ... ;) – Dieldrin

You're right. So I changed. Thanks. I found it confusing, We generally refer the position from the top of the screen. He could have mean '100vh - 100px" – Quinta

Note : You actually can't use center 0px bottom 0px : you can't define "100px away from the center" (to where ?). It only works with top, bottom, left and right. – Gelatinize

Answer 2

If you are using the background property use:

.background{
    background-position: center bottom -100px
}

If you want to position a tag that resembles a background try using:

.background{
    margin-bottom -100px;
}

or

.background{
    bottom: -100px;
    position: absolute;
}

Varion