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％。有任何想法吗？

谢谢！

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;

Answer 2

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

如何使用css调整背景图像的大小和浮动？

2 个答案: