CODEWITHSUNDEEP
csspositionbackground-position
drake035
drake035

Reputation: 2897

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

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?

Upvotes: 8

Views: 10997

Answers (2)

tzi
tzi

Reputation: 9469

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

Upvotes: 21

Clemens Himmer
Clemens Himmer

Reputation: 1352

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

Upvotes: 2

Related Questions