背景圖片爲什麼不能完全顯示？

-2

你能告訴我爲什麼我的背景圖片不顯示完全。它僅顯示高達角逐爲什麼呢？我只有在這頭，因此顯示的背景圖像只有小部分背景圖片爲什麼不能完全顯示？

這裏是我的代碼

.button-bar { 
    padding:3% 20% 3% 20%; 
}  
#wrapper{ 
    background-image: url(/login); 
}

其實我得到了答案，但當我試圖給我的標題標籤保證金我的背景圖片下來，但我的標題標題保持在同一位置上。

看到這個

.headerTitle{ 
    margin-left:2%; 
    margin-top:2%; 
}

來源

2015-05-30 Shruti

多少呢你想說明什麼？ –

圖像的全寬和高度..full圖像 – Shruti

我看到兩個downvotes沒有任何解釋。如果您必須減少一個問題，請提一點建議。我們在這裏以積極的方式確定本網站的基調。請按照它在旅遊頁面中指示的內容進行操作。 – Nirmal

你的CSS做你告訴它做什麼....

#wrapper與背景只顯示小滑行。如果你想讓它佔據整個頁面使用.ionic-scroll在你的CSS，而不是#wrapper

見形象：

http://screencast.com/t/l1ptRRNaDs

嘗試與.button-bar你的CSS更換#wrapper，然後嘗試.ionic-scroll並查看結果

.ionic-scroll { 
    background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0); 
}

如果你想完整的圖像裏面#wrapper顯示，你知道圖像的高度，你CA將n設置#wrapper的高度和寬度，像這樣：

#wrapper{ 
    height: 1000px; 
    width: 1000px; 
    background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0); 
}

如果你不知道你的形象的高度和寬度，我會建議使用內部#wrapper代替<img>標籤......這將導致#wrapper調整到圖像尺寸

來源

2015-05-30 12:57:07

謝謝..for回答.. !!等待幾秒鐘後我會告訴你 – Shruti

看到這個http://codepen.io/anon/pen/bdgawo。它的工作，但如果我想給一些頂部邊緣標題我的背景圖像改變它的位置 – Shruti

請檢查我的更新 – Shruti

因爲具有背景的元素只與其中的元素一樣高。所以在你的包裝中，只有一個像素高X的h4元素，所以包裝也是X的像素高。

嘗試在包裝中添加最小高度並查看後面的內容。就像這樣：

#wrapper{ 
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0); 
min-height: 250px; 
}

https://jsfiddle.net/0tnjznt5/

來源

2015-05-30 12:57:24 nclsvh

試試這個：

.button-bar { 
    padding:3% 20% 3% 20%; 
}  
#wrapper{ 
     background-image: url("http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif"); 
    min-height: 500px; 
}

來源

2015-05-30 13:00:19 piyush

看到這個http://codepen.io/anon/pen/bdgawo。它的工作，但如果我想給一些頂部邊緣標題我的背景圖像更改它的位置 – Shruti

請檢查我的更新 – Shruti

#wrapper { background-image：url（「 http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif「）; min-height：500px; background-repeat：no-repeat; background-attachment：fixed; background-position：center; } – piyush

背景圖片爲什麼不能完全顯示？

回答

相關問題