如何使用CSS调整并向右浮动背景图像的大小？

Question

我正在开发这个网站：http://www.problemio.com，我需要将背景图添加到顶部横幅，我已经完成了这一步。

我现在无法弄清如何将其全部移动到右侧并使其长度变小，以便仅占屏幕宽度的一半。

有任何想法吗？到目前为止，我对整个横幅div的css如下：

.banner 
{
    width:60em;
    margin: 0 auto;
    position: relative;
    padding: 0.3em 0;
    z-index: 1;
    background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png');
    background-repeat: no-repeat;
    background-image: right-align
}

但我不知道如何使背景图片右对齐并重新调整为div宽度的50％。 有什么想法吗？

谢谢！

- Genadinik

---

你不应该在CSS中包含缩放。如果图像需要特定的大小，请将其设置为该大小。 - eaj

Answer 1

你可以使用left、right、bottom、top和center来对齐背景。也可以使用百分比。

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') right no-repeat;

然而，你不能使用CSS2调整图片大小，但可以在CSS3中进行调整。

background-size: <width> <height>;

更多用法：

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') top right no-repeat;

底部和居中对齐：

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') bottom center no-repeat;

- MacMac

---

除非您使用CSS3的background-size属性（http://www.css3.info/preview/background-size/），该属性具有良好的浏览器支持（http://caniuse.com/background-img-opts）。 - sdleihssirhc

更新了我的帖子，CSS2不支持调整背景图片大小，但在CSS3中是可以的。干杯！ 今天学到了新东西 - MacMac

谢谢，我仍然不明白是什么原因导致横幅的极右侧部分成为实心灰色，而背景图像没有延伸到那里。你知道这是为什么吗？ - Genadinik

Answer 2

使用 background-position: right; 和 background-size: [宽度] [高度] （根据需要替换值）。

- Niet the Dark Absol