如何使用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調整背景圖片的大小並使其浮動？

回答

相關問題