2015-06-15 146 views
3

創建了一個現有項目其無響應的網站。現在我需要更改響應網站。我需要更改我的徽標圖像響應網站?我改變了,但不工作?HTML背景圖像更改爲CSS?

<td colspan="2" style="background-image:url('site_conf/images/det_banner.jpg'); background-repeat:no-repeat; background-position:center;" width="100%" height="100" align="right" > 

這個代碼我的網站標誌圖像如何將圖像變更爲完全響應的標誌?

我已經創建的類文件中的HTML像

<td class="img1"> 

我的CSS代碼:

@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) 
    { 

    .img1{ 
     background-image:url('site_conf/images/det_banner.jpg'); 
     background-repeat:no-repeat; 
     background-position:center; 
     width:100%; 
     Height:100; 
     } 
} 

它不是在對應的工作?任何錯誤我的代碼?

+0

在你的CSS代碼,你輸入 「ackground重複」。 你確定你的圖片在正確的名稱文件夾中嗎? –

+0

拼寫錯誤我的代碼正確輸入但不工作我已經把這裏的代碼標誌形象代碼和css部分 – Thennarasu

+0

背景圖像:網址(「../ site_conf /圖片/ det_banner.jpg」);嘗試使用表 – missellorin

回答

0

.img1類被分配給<td>所以背景-size屬性應該被添加到使圖像佔據的寬度的100%的大小。

CSS

.img1 { 
    background-image: url('site_conf/images/det_banner.jpg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: 100% ; 
    width: 100%; 
    Height: 100px; 
} 

注:由於你現有的代碼表結構我不是100%肯定 ,我的解決方案會奏效。但你可以試試看。如果你可以創建一個小提琴那麼它將是容易引導你的 。

+0

工作,但圖像顯示非常小的 – Thennarasu

+0

這就是可能是因爲您'​​''width'的。檢入開發者工具。 –