CODEWITHSUNDEEP
htmlcssbackground
user4404255
user4404255

Reputation:

Background image position (from bottom and right)

I need a background positioning like this: 50px from right and 60px from the bottom. If I put background position to right bottom, it moves to extreme right and bottom.

Here is html and css.

.box {
  background-image: url(http://www.iconbeast.com/images/iconbeast-pro.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  height: 300px;
  width: 80%;
  border: 1px solid #AAA;
}
<div class="box">
  <p>
    This is a box. :) :)
  </p>
</div>

I can't solve it, although I have been trying and searching everywhere. Thank you :)

Upvotes: 1

Views: 680

Answers (3)

Sameeraa4ever
Sameeraa4ever

Reputation: 568

change background position

background-position: right 50px bottom 60px;

Upvotes: 0

codingrose
codingrose

Reputation: 15699

Try this:

background-position: right 50px bottom 60px;


.box {
  background-image: url(http://www.iconbeast.com/images/iconbeast-pro.png);
  background-repeat: no-repeat;
  background-position: right 50px bottom 60px;
  height: 300px;
  width: 80%;
  border: 1px solid #AAA;
}
<div class="box">
  <p>
    This is a box. :) :)
  </p>
</div>

Upvotes: 0

Weafs.py
Weafs.py

Reputation: 22992

You could use calc(100% - 50px)(full width - 50px) and calc(100% - 60px)(full height - 60px).

.box {
  background-image: url(http://www.iconbeast.com/images/iconbeast-pro.png);
  background-repeat: no-repeat;
  background-position: calc(100% - 50px) calc(100% - 60px);
  height: 300px;
  width: 80%;
  border: 1px solid #AAA;
}
<div class="box">
  <p>
    This is a box. :) :)
  </p>
</div>

Upvotes: 1

Related Questions