css如何拉長背景圖片

① 製作html網頁時如何使用CSS使背景圖片拉伸（

比方說背景圖片鋪滿整個div（不管多大）：

<divstyle="width:320px;height:240px;background:url(圖片url)no-repeatcenter/100%100%"></div>

如果想讓圖片保持原始的長寬比例不變形（多餘部分自動裁去）：

<divstyle="width:320px;height:240px;background:url(圖片url)no-repeatcenter/cover"></div>

如果想保持比例的同時又要顯示出完整的圖片（div會出現留白）：

<divstyle="width:320px;height:240px;background:url(圖片url)no-repeatcenter/contain"></div>

② 在css中設置圖片的背景圖，怎麼設置圖片縱向拉伸

css中設置背景圖拉伸填充，在css2.1之前這個背景的長寬值是不能被修改的。 實際的結果是只能重復顯示，可以使用repeat,repeat-x,repeat-y,no-repeat這些屬性來控制背景圖片的顯示。所以一般用作背景圖片的有2類：
1.是一整張大圖，尺寸和區域大小剛好吻合
2.一個很小的條狀圖，通過repeat後，形成一個很規則的大圖背景。
css3出現以後，可以用background-size 屬性來實現背景圖拉伸填充。 而且這個屬性在firefox，chrome，以及ie9上都可以使用。
具體使用方法如下：
背景圖尺寸（數值表示方式）：
#background-size{ background-size:200px 100px; }
背景圖尺寸（百分比表示方式）：
#background-size{ background-size:30% 60%; }
背景圖尺寸（等比擴展圖片來填滿元素，即cover值）：
#background-size{background-size:cover; }
背景圖尺寸（等比縮小圖片來適應元素的尺寸，即contain值）：
#background-size{ background-size:contain; }
背景圖尺寸（以圖片自身大小來填充元素，即auto值）：
#background-size{ background-size:auto; }

③ 怎麼用css把背景圖片拉伸 不是平鋪

1、首先准備一張設置為背景的圖片，這邊准備的是一張650px*347px的圖片。

④ css怎麼設置圖片背景自動拉伸

no-repeat: 即無論背景圖片的大小, 只顯示單個背景圖片

repeat: 指背景圖片橫向和縱向重復連續顯示;

repeat-x: 指背景圖片橫向重復連續顯示;

repeat-y 指背景圖片縱向重復連續顯示;例: 查看本站css文件,可以看到以下代碼:

body {
font: normal 12px/1.5 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybg.jpg) repeat-y;
}

可以看到背景圖片bodybg.jpg是縱向重復顯示的, 並隨頁面的長度的增加而增加.

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

body{

background: url("image.png") no-repeat;

height:100%;

width:100%;

overflow: hidden;

background-size:cover;或者background-size:100%;

}

(5)css如何拉長背景圖片擴展閱讀:

CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。 CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字型大小樣式，擁有對網頁對象和模型樣式編輯的能力。

編程工具

記事本：使用Windows系統自帶的記事本可以編輯網頁。只需要在保存文檔時，以.html為後綴名進行保存即可。

Dreamweaver：它與Flash、Fireworks並稱網頁三劍客。Dreamweaver是集網頁製作和管理網站於一身的所見即所得網頁編輯器，它是第一套針對專業網頁設計師特別開發的視覺化網頁開發工具，利用它可以輕而易舉地製作出充滿動感的網頁。

⑥ css中如何調整插入背景圖片的大小

可以通過cover和contain來對圖片進行伸縮。

語法：

background-size:auto;/* 默認值，不改變背景圖片的高度和寬度 */

background-size:100px 50px;/* 第一個值為寬，第二個值為高，當設置一個值時，將其作為圖片寬度來等比縮放 */

background-size:10%;/* 0％~100％之間的任何值，將背景圖片寬高按百分比顯示，當設置一個值的時候同也將其作為圖片寬度來等比縮放 */

background-size:cover;/* 將背景圖片等比縮放填滿整個容器 */

background-size:contain;/* 將背景圖片等比縮放至某一邊緊貼容器邊緣 */

(6)css如何拉長背景圖片擴展閱讀：

CSS背景圖片自適應、全屏、填充、拉伸

方法一：js控制

<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">

<img src="pictures/background.jpg" height="100%" width="100%"/>

</div>

<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>

<script type="text/javascript">

$(function(){

$('#formbackground').height($(window).height());

$('#formbackground').width($(window).width());

});

</script>

方法二：全瀏覽器兼容

.bg{

background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);

filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";

-moz-background-size:100% 100%;

background-size:100% 100%;

}

⑦ css中的背景圖怎麼改變大小

需要准備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html。

⑧ css怎麼把背景圖片拉伸至100

具體使用方法如下：
背景圖尺寸（數值表示方式）：

代碼如下:

#background-size{
background-size:200px 100px;
}

背景圖尺寸（百分比表示方式）：

代碼如下:

#background-size2{
background-size:30% 60%;
}

背景圖尺寸（等比擴展圖片來填滿元素，即cover值）：

代碼如下:

#background-size3{
background-size:cover;
}

背景圖尺寸（等比縮小圖片來適應元素的尺寸，即contain值）：

代碼如下:

#background-size4{
background-size:contain;
}

背景圖尺寸（以圖片自身大小來填充元素，即auto值）：

代碼如下:

#background-size5{
background-size:auto;
}

⑨ 請問，怎麼用CSS把背景圖片拉伸我添加的背景總是不能完全覆蓋頁面！真誠希望高手指導！先謝謝了！

body{background:url(圖片) repeat}

背景{}中添加background: url(圖片地址)repeat
詳細講解：
repeat 背景圖像在縱向和橫向上平鋪
no-repeat 背景圖像不平鋪
repeat-x 背景圖像在橫向上平鋪
repeat-y 背景圖像在縱向平鋪

代碼如下:
默認代碼為：body{background-color:#FFFFFF}
換成以下代碼
body{background:url(背景圖片地址) background-position: center;background-attachment: fixed;repeat-x #FFFFFF}
這是全屏的背景代碼~

⑩ CSS 背景圖片如何隨頁面自動拉伸

background:url(../../config/img/Title.png) no-repeat;不重復
background:url(../../config/img/Title.png) repeat-x;橫向平鋪
background:url(../../config/img/Title.png) repeat-y;豎著鋪
什麼不加就是橫豎平鋪
如果你是想拉伸的話，豎著切一張幾個像素寬的背景圖（比如說寬2px，高990px這樣的一張圖），然後設置repeat-x，橫向平鋪。這樣看起來就像是一張大圖。這種方法適用於縱向漸變的背景。