How to position background image in bottom right corner? (CSS)

Question

I have a 500x500 px image which is set as a background image on my website (as background-image of <body>) But I need this image to be located in a bottom right corner of the webpage. How can I achieve this? (better with css method)

Thank You.

score 129 · Accepted Answer · edited Jan 28 '19 at 15:42

129

Voilà:

body {
   background-color: #000; /*Default bg, similar to the background's base color*/
   background-image: url("bg.png");
   background-position: right bottom; /*Positioning*/
   background-repeat: no-repeat; /*Prevent showing multiple background images*/
}

The background properties can be combined together, in one background property. See also: https://developer.mozilla.org/en/CSS/background-position

edited Jan 28 '19 at 15:42

StudioTime

22,603
38
120
207

answered Oct 11 '11 at 16:57

Rob W

341,306
83
791
678

1

Thnx, y've helped me quiet a lot today ))) – Ilja Oct 11 '11 at 16:58
@Legionar Works fine for me, in Chrome 43 & Firefox 38. – Rob W Jun 02 '15 at 10:30
Sorry, my fault, it was working, but `jquery` was changing `bottom` to `0`... :-/ – Legionar Jun 02 '15 at 11:18
2

I had to add `background-attachment: fixed;` to get this to work properly – Brian Risk Jun 05 '17 at 15:05
This may not work as expected if the body element size is smaller than the viewport / content size. Adding `background-attachment: fixed;` as suggested in a comment avoids that issue. – Brian Moeskau May 02 '21 at 05:33

score 24 · Answer 2 · answered Nov 22 '15 at 11:02

24

for more exactly positioning:

      background-position: bottom 5px right 7px;

answered Nov 22 '15 at 11:02

Arthur Tsidkilov

5,401
2
21
18

3

Well done for providing example on fine-tuning background image alignment relative to the "docking point" via pixels – Dimitry K Aug 24 '17 at 11:30
1

This is a more flexible approach. Well done. – Usman Ahmed Oct 28 '20 at 09:19

score 13 · Answer 3 · answered Oct 11 '11 at 17:00

13

This should do it:

<style>
body {
    background:url(bg.jpg) fixed no-repeat bottom right;
}
</style>

http://www.w3schools.com/cssref/pr_background-position.asp

answered Oct 11 '11 at 17:00

score 8 · Answer 4 · answered Oct 11 '11 at 16:57

8

Did you try something like:

body {background: url('[url to your image]') no-repeat right bottom;}

answered Oct 11 '11 at 16:57

markt

5,126
31
25

How to position background image in bottom right corner? (CSS)

4 Answers4

Linked