2012-08-07 41 views
-1

我在www.mariodecristofano.com/vrtraining上有一個網站,我想添加一個類似於http://www.veteransretreat.org.uk/managecontent.aspx?mta_dmd=welcome_to_veterans_retreat&object.id=10105中發現的圖像。使用CSS在網頁的「邊緣」添加摩天大樓圖像

我有圖像,但我該如何操縱CSS,這裏是:http://www.mariodecristofano.com/vrtraining/css/style.css

您的幫助表示讚賞。

+4

你知道你可以看看其他網站的CSS,對吧? – Don 2012-08-07 15:15:21

+0

供將來參考:http://meta.stackexchange.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link-to-it – 2012-08-07 15:16:39

回答

0

如果您調整窗口大小,您將看到圖像實際上停靠在中心,只是圖片本身非常大,圖形設計爲正確。

因此重現:

  • 做出大的圖像在身體空間
  • 因素,把你的圖片給圖像
  • CSS的圖像中心體的頂部,這個CSS的權利:

background: url('/path/to/image') no-repeat center top;

0

檢查上述網站透露:

body { 
    background-image: url(../images/veterans-retreat-background.jpg); 
    background-repeat: no-repeat; 
    background-position: top center; 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    background-color: white; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
} 

background-*屬性是你感興趣的。您還可以使用background-position: top right;來右對齊圖像。

0

嘗試使用css屬性right:0(如果你想要它的右邊緣,左上角和下角也是可用的屬性),首先你必須給你的圖像一個absoulte位置,儘管通過css屬性position:absolute。 Z指數,將決定你的頁面是什麼ontop的或下,較高的z指數上漲(就好像它是越來越近了,你的臉)

HTML:

<img class='SS src='path/skyScraper'> 

CSS:

img.SS { 
     position:absolute; 
     right:0; 
     z-index:2; 
     }