帶邊框的全屏幕背景圖片

我需要做什麼（並且失敗）是這樣的網站：帶邊框的全屏幕背景圖片

網站需要全屏，沒有滾動。我不太滿意的結果，因爲：

- 當網頁被打開的垂直簾（智能手機）在底邊框太大

-I也試圖讓這個背景圖像顯示完全頂底部（我想面對頂部和底部全面看，而不僅僅是部分），但我真的不知道該怎麼做。

我的CSS代碼：

body { 
 
    background: url('http://web-industry.eu/landing/img/bg.png') no-repeat; 
 
    background-size: 100% 100%; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    box-sizing: border-box; 
 
    border: #f36d32 3px solid; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<body></body>

：

html 
 
{ 
 

 
    background: #f36d32; 
 
    width: 98%; 
 
    height: 95.9%; 
 
    padding: 1%; 
 

 
} 
 

 
    body 
 
    { 
 
    background: url(http://web-industry.eu/landing/img/bg.png) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 100%; 
 
    }

好，邊界問題是由@imGaurav用這樣的代碼來解決但我仍然無法弄清楚如何使頂面和底面都可見。

來源

2015-10-16 engray

你能分享你的代碼嗎？ –

請發佈您的jsfiddle。 – Alex

對不起，這裏是我的代碼：https://jsfiddle.net/24rcLmsj/ – engray

body { 
 
    background: url('http://web-industry.eu/landing/img/bg.png') no-repeat; 
 
    background-size: 100% 100%; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    box-sizing: border-box; 
 
    border: #f36d32 3px solid; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<body></body>

來源

2015-10-16 12:12:42 imGaurav

他說：「我想面對頂部和底部全面看到，而不是部分」。您的代碼在所有分辨率中不顯示全臉 – Sylwek

謝謝，您部分解決了我的問題（帶邊框）。但正如@Sylwek所說，我仍然希望頂面和底面都完全可見。 – engray

檢查最新的編輯是否可以幫助您 – imGaurav

所以，你只是想要全尺寸的圖像與不同的屏幕尺寸不同的比例縮放？

在對圖像的div試試你的CSS：

背景大小：含有;

如果這不是你所追求的，這裏是一個指向你可以使用和測試的所有屬性值的鏈接。

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

來源

2015-10-16 12:03:37 GClinton

添加以下CSS到HTML的身體

position: absolute;left: 0;top: 0;

來源

2015-10-16 12:06:45

您的意思是somethink這樣呢？

<div class="vertical-container"> 
    <div class="vertical-middle"> 
     <img src="http://www.susansolovic.com/blog/wp-content/uploads/2014/04/instagram-logo-md-300x300.png"> 
    </div> 
</div> 


html,body { 
    height: 100%;  
} 

img { 
    max-width: 100%; 
    max-height: 100%; 
} 

.vertical-container { 
    background-color: green; 
    display: table; 
    height: 100%; 
    width: 100%; 
    text-align: center; 
} 
.vertical-middle { 
    height: 100%; 
    vertical-align: middle; 
    display: table-cell; 
}

https://jsfiddle.net/org72bfb/1/

來源

2015-10-16 12:09:37 Sylwek

您可以使用下面的CSS來解決這個問題。參考CSS-trick

html { 
    background: url(http://i.stack.imgur.com/zRKcX.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

來源

2015-10-16 12:38:10

不，他不能，因爲他說：「我希望能夠全面地看到頂部和底部，而不僅僅是部分地看到」 – Sylwek

帶邊框的全屏幕背景圖片

回答

相關問題