如何使用css调整背景图片的大小并使其浮动？

我在本网站工作：http://www.problemio.com，我有要求将背景图片添加到我所做的顶部横幅。如何使用css调整背景图片的大小并使其浮动？

我无法弄清楚该如何做的是如何将它一直移到右侧，并缩小它的长度，使它只占用屏幕宽度的一半。

任何想法如何做到这一点？到目前为止，我有这个CSS的整体横幅DIV：

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

谢谢！

来源

2011-10-03 Genadinik

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

您可以使用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;

来源

2011-10-03 18:22:00 MacMac

除非您使用[CSS3的'background-size'属性]（http://www.css3.info/preview/background-size/），它有[体面的浏览器支持]（http://caniuse.com/background- IMG-OPTS）。 – sdleihssirhc

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

感谢我仍然不明白的是什么导致横幅的非常正确的一点是纯灰色和背景图像没有延伸到那里。你知道为什么会发生吗？ – Genadinik

使用background-position: right;和background-size: [width] [height]（在需要的地方替换值）。

来源

2011-10-03 18:23:54

如何使用css调整背景图片的大小并使其浮动？

回答

相关问题