如何将背景图片放置在右下角? (CSS)

我有一个500x500像素的图像,该图像在我的网站上被设置为背景图像(作为<body>的背景图像),但是我需要将此图像放置在网页的右下角。 我该如何实现? (更好的CSS方法)

谢谢。

Ilja asked 2020-02-15T10:53:48Z
4个解决方案
100 votes

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*/
}

可以在一个背景属性中将背景属性组合在一起。另请参见:[https://developer.mozilla.org/en/CSS/background-position]

Rob W answered 2020-02-15T10:54:06Z
16 votes

更精确的定位:

      background-position: bottom 5px right 7px;
Arthur answered 2020-02-15T10:54:25Z
12 votes

应该这样做:

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

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

answered 2020-02-15T10:54:50Z
7 votes

您是否尝试过类似的方法:

body {background: url('[url to your image]') no-repeat right bottom;}
markt answered 2020-02-15T10:55:09Z
translate from https://stackoverflow.com:/questions/7729652/how-to-position-background-image-in-bottom-right-corner-css