如何在整個頁面製作背景圖片

如何製作整個頁面高度的背景圖片。我得到了寬度，但不是高度。這是我的代碼。如何在整個頁面製作背景圖片

<! DOCTYPE html/> 
<html> 
<head> 
<title> Singapore! </title> 
<style> 

* 

{ 
    margin:0px; 
    padding:0px; 
} 


div.background 

{ 

    background: url('singaporebackground.jpg'); 
    background-size: 100% auto; 
    height: 1000px; 
    padding-top: 50px; 

} 

div.transbox 

{ 

    margin: 0px 225px; 
    width: 60%; 
    height: 100%; 
    background-image: linear-gradient(top, rgb(255,255,255) 24%, rgb(130,130,130) 39%, rgb(0,0,0) 81%); 
    background-image: -o-linear-gradient(top, rgb(255,255,255) 24%, rgb(130,130,130) 39%, rgb(0,0,0) 81%); 
    background-image: -moz-linear-gradient(top, rgb(255,255,255) 24%, rgb(130,130,130) 39%, rgb(0,0,0) 81%); 
    background-image: -webkit-linear-gradient(top, rgb(255,255,255) 24%, rgb(130,130,130) 39%, rgb(0,0,0) 81%); 
    background-image: -ms-linear-gradient(top, rgb(255,255,255) 24%, rgb(130,130,130) 39%, rgb(0,0,0) 81%); 
    background-image: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    color-stop(0.24, rgb(255,255,255)), 
    color-stop(0.39, rgb(130,130,130)), 
    color-stop(0.81, rgb(0,0,0))); 

    border-top: 5px solid black; 
    opacity:0.4; 
    filter:alpha(opacity=40); /* For IE8 and earlier */ 
} 

div.transbox p 

{ 
    margin: 30px 40px; 
    font-weight: bold; 
    color: #000000; 
} 

</style> 
</head> 
<body> 

<div class="background" /> 
<div id="header" /> 
<!--<img src="finishedsingaporelogo.jpg" /> --> 
</div> 
<div class="transbox" /> 
<p> Content </p> 
</div> 
</div>

看到我的背景圖像是全寬，但它重複它的高度。我也試過不重複，但它只是留下了空白，請幫助

來源

2012-11-10 user1815176

您可以絕對位置，並使用background-size: cover：

div.background { 
    background: url('singaporebackground.jpg'); 
    background-size: cover; 

    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

演示：http://jsfiddle.net/gWQv4/

來源

2012-11-10 21:29:27 Blender

如何在整個頁面製作背景圖片

回答

相關問題