網頁設計如何把背景圖片鋪滿_CSS中如何設拉伸背景圖片鋪滿屏幕

1、網頁設計中怎麼讓一張圖片填充滿整個畫面求代碼

1、如果樓主只是將其當做一張圖片顯示，可以通過css控制，如img{width:100%;height:100%;}.
否則需要將其作為網頁背景的話可以試試如下方法：
2、如果這張圖片為背景圖片由於背景圖片不具有伸縮性，只能通過別的方法繞著解決，在ie中可以用<body
style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='1.jpg',sizingmethod='scale')">，實現背景拉伸鋪滿整個瀏覽器，但其它的瀏覽器不支持。
這時可以拐個彎，設置兩層div，底層div當做背景使用，放置一張圖片即可。
<div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/></div>
再將網頁內容放置到第二層上<div id="content">頁面內容</content>
3、網頁背景圖片默認情況下是重復平鋪滿整個頁面。上面2方法是要求圖片不重復，但又得占滿瀏覽器所採用的方法。

2、如何使背景圖片鋪滿網頁

獲取瀏覽器可見區高度(滾動條寬度以排除)
document.documentElement.clientHeight
獲取瀏覽器可見區寬度(滾動條寬度以排除)
document.documentElement.clientWidth
獲取文檔高度(建議用瀏覽器可見區域高度)
document.body.clientHeight
用screen獲得的為屏幕解析度，只有用戶在全屏看網頁時網頁大小才等於屏幕的解析度
設置body的背景
document.body.style.backgroundImage=『圖片地址』
這種方法是比較精確的控制方法，可以根據獲取到的相關大小來控制背景圖片
這種方法的好處就是：如果你的同一個背景圖片有很多不同的解析度，在頁面呈現上會更美觀
缺點是：必須根據多種不同大小製作多張背景圖片，且調用哪張圖片不易確定
用絕對定位設置背景的方式的好處是：方便代碼的書寫
絕對定位缺點是：背景圖片要大而清晰，否則在大尺寸屏幕上會出現背景圖片模糊的情況，且若圖片比例與屏幕比例不同（如4:3和16:9），圖片會變形

3、html網頁設計裡面怎麼平鋪背景圖片

html網頁設計裡面平鋪背景圖片的代碼如下：
<html>
<body>
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%">
<img src="pictures/background.jpg" width="100%" height="100%"/>
</div>
</body>
</html>
網頁背景默認是平鋪整個屏幕的，可能有以下原因導致不能平鋪：

1、圖片不夠大，又background屬性不能拉伸圖片；
2、只能用個div，把其z-index值設為負，並使這個div大小為整個body大小，在div里用<img> ；
3、body的background屬性去掉，要不然會被遮住。

4、網頁設計中怎麼讓一張圖片填充滿整個畫面？

5、html中，怎麼讓背景圖片充滿整個頁面

用Dreamweaver軟體編輯

6、用Dreamweaver8設計網頁，怎樣使背景圖片鋪滿全屏？

在body裡面設背景，
body{ background:url(圖片地址) 0 0 repeat;}

但是圖片會向X，Y兩邊拉伸，如果圖片尺寸較小會很補美觀；
推薦方案：1.背景圖片的尺寸做的盡量大一點
2.背景圖片的外面可以做成漸變到某個色系，然後body設置背景色
body{ background:#000 url(圖片地址) 0 0 repeat;}

7、html 怎麼讓背景圖鋪滿整個頁面

我自己試出來的，希望有用
例子，用css
<body background="images\002.png"
style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;"
>

8、CSS中如何設拉伸背景圖片鋪滿屏幕

#bg{
margin:0px;
background: url(images/beijing.png) no-repeat;
background-size:100% 100%;
background-attachment:fixed;
}

擴展資料：

url(images/beijing.png)——圖片路徑的位置；

no-repeat—— 圖片不重復；

center 0px——center是距離頁版面左邊權的定位，0px是距離頁面上面的定位；

background-position: center 0——就是圖片的定位，同上；

background-size: cover;——把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中；

min-height: 100vh;——視窗的高度，「視區」所指為瀏覽器內部的可視區域大小，即window.innerWidth/ window.innerHeight大小。

9、網頁製作怎麼讓背景圖片占滿整個屏幕

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>窗口背景變化</title>
<style type="text/css">
*{margin:0;padding:0;}
#bg{
position:absolute;
top:0px;
left:0px;
z-index:-999;
}
</style>
</head>
<body>
<div id="bg"><img src="http://www.wallcoo.com/ad/Korea_Besti_Belli/images/jihyun-bestibelli06.jpg" alt="HIGH"></div>
<input type="text" id="msg" name="msg" size="50"/>
<script type="text/javascript">
window.onresize = window.onload = function(){
var w,h
if(!!(window.attachEvent && !window.opera))
{
h = document.documentElement.clientHeight;
w = document.documentElement.clientWidth;
}else{
h = window.innerHeight;
w = window.innerWidth;
}
document.getElementById('msg').value ='窗口大小：' + 'width:' + w + '; height:'+h;
var bgImg = document.getElementById('bg').getElementsByTagName('img')[0];
bgImg.width = (w - 5);
bgImg.height= (h-5) ;

}
</script>
</body>
</html>

背景圖片自適應窗口大小

10、製作網頁怎樣把背景圖片鋪滿

background:url(../images/nav_bg.jpg);

直接用這個屬性即可，../images/nav_bg.jpg，這個是你的圖片位置

導航:首頁 > 萬維百科 > 網頁設計如何把背景圖片鋪滿

網頁設計如何把背景圖片鋪滿

與網頁設計如何把背景圖片鋪滿相關的知識