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?

Are you using an background position property for your background or an image tag behind everything? Need to see your code. — salad_bar_breath, Jan 08 '16 at 13:51
You should add your HTML Markup with other CSS dependencies, it's more guessing than answering without it. — Clemens Himmer, Jan 08 '16 at 14:02

tzi · Accepted Answer · 2016-01-08T16:51:27.127

17

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

edited Jan 08 '16 at 16:51

answered Jan 08 '16 at 13:50

tzi

8,719
2
25
45

4

You must be meaning : background-position: center bottom -100px; http://codepen.io/anon/pen/LGyLGN – G-Cyrillus Jan 08 '16 at 13:53
It depends in which way way you want to move background. – tzi Jan 08 '16 at 13:55
well he was asking for bottom minus 100px ... ;) – G-Cyrillus Jan 08 '16 at 14:47
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" – tzi Jan 08 '16 at 16:41
1

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`. – Cladiuss Sep 21 '17 at 10:05

score 2 · Answer 2 · answered Jan 08 '16 at 14:01

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;
}

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

2 Answers2