正確的標識/圖像大小和位置的CSS

我想我的標誌定位到我的網站的背景圖片，但W/O型成功。我的標誌的原始大小是712x200像素。但我希望它更小一點，所以我將高度：140px和寬度：500px添加到我的css中（這與我的徽標的原始大小成比例）。正確的標識/圖像大小和位置的CSS

然而，logo圖片不能調整大小（它不會變小，因爲我在我的CSS定義）。絕了，它被裁剪！？怎麼來的？

我如何居中標誌到我的背景圖片，讓我loggo總是出現在屏幕上（垂直和水平方向）的中心。

這裏是我的CSS代碼：

.logoimage{ 
    background: url("images/Logo.png") no-repeat scroll center; 
    width: 500px; 
    height: 140px; 
}

這裏是HTML：

<section id="home" class="photobg"> 
     <div class="inner"> 
       <div class="copy"> 
        <h1 class="logoimage"></h1> 


       </div> 
     </div> 
    </section>

順便說一句，我發現了什麼，我想在這裏做一些類似的例子：http://milkandpixels.com/

所以，基本上我有一個背景圖片，我想在它的頂部添加它應該始終居中的徽標。謝謝大家！

來源

2013-07-05 C. Felipe

嗯，是否加入這種風格修復問題？

.logoimage{ 
    background-size: contain; 
}

否則，讓我知道，我會很樂意進一步幫助！

來源

2013-07-05 19:56:03 Serlite

是的，謝謝！我如何將它居中（水平和垂直）？ –

嗯，那麼你可以添加另一個'center'到你的背景屬性，所以它變成'background：url（「images/Logo.png」）no-repeat scroll center center;'垂直和水平居中。 – Serlite

兩個中心沒有工作。我的標誌仍然堅持中央上部:( –

將圖像放入圖像標籤中，向圖像標籤添加一個類。在類地說：

.logoimage{ 

    width: 500px; 
    height: auto; 
}

來源

2013-07-05 19:56:30 user2067005

您應該使用的背景大小：

.logoimage{ 
    background: url("images/Logo.png") no-repeat scroll center; 
    background-size: 500px 140px; 
}

http://www.w3schools.com/cssref/css3_pr_background-size.asp

來源

2013-07-05 19:56:46 Lightsaber

如果沒有其他的答案的工作，你總是可以嘗試和規模與
height: 50%
width: 50%

來源

2013-07-05 19:59:49 ajdigregorio

This style might be useful: 

.logoimage 
{ 
background:url("flwr.gif"); 
background-size:140px 500px; 
background-repeat:no-repeat; 
padding-top:40px; 
}

來源

2013-07-06 05:57:42

正確的標識/圖像大小和位置的CSS

回答

相關問題