如何拉伸背景圖像以填充div

Question

我想將背景圖像設置為不同的div，但我的問題是：

1. 圖像的大小是固定的（60px）。
2. 改變div的大小

如何拉伸背景圖像以填充div的整個背景？

#div2{
  background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
  height:180px;
  width:200px;
  border: 1px solid red;
}

在這里查看代碼。

Answer 1

加

background-size:100% 100%;

到背景圖像下面的css。

您還可以指定確切的尺寸，即：

background-size: 30px 40px;

這里： JSFiddle

Answer 2

您可以使用：

background-size: cover;

或者只使用大背景圖片：

background: url('../images/teaser.jpg') no-repeat center #eee;

Answer 3

現代CSS3（推薦用於未來，可能是最佳解決方案）

.selector{
   background-size: cover;
   /* stretches background WITHOUT deformation so it would fill the background space,
      it may crop the image if the image's dimensions are in different ratio,
      than the element dimensions. */
}

最大。 拉伸沒有裁剪也不變形（可能不填充背景） ： background-size: contain;
強制絕對拉伸（可能導致變形，但沒有裁剪） ： background-size: 100% 100%;

“舊”CSS“總是在工作”的方式

絕對定位圖像作為（相對定位）父項的第一個子項並將其拉伸到父項大小。

HTML

<div class="selector">
   <img src="path.extension" alt="alt text">
   <!-- some other content -->
</div>

相當於CSS3 background-size: cover; ：

要動態實現這一點，你必須使用相反的contains方法替代 （見下文），如果你需要使裁剪圖像居中，你需要一個JavaScript動態地做到這一點 - 例如使用jQuery：

$('.selector img').each(function(){ 
   $(this).css({ 
      "left": "50%", 
      "margin-left": "-"+( $(this).width()/2 )+"px", 
      "top": "50%", 
      "margin-top": "-"+( $(this).height()/2 )+"px" 
   }); 
});

實際例子：

相當於CSS3 background-size: contain; ：

這個可能有點棘手 - 你的背景維度將溢出父級將CSS設置為100％另一個自動。 實際例子：

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: auto;
   /* -- OR -- */
   /* width: auto; 
      height: 100%; */
}

相當於CSS3 background-size: 100% 100%; ：

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: 100%;
}

PS：要完全動態地以“舊”方式完成覆蓋/包含的等價物（因此您不必關心溢出/比率），您必須使用javascript來檢測比率並按照描述設置尺寸。 ..

Answer 4

為此，您可以使用CSS3 background-size屬性。 像這樣寫：

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    background-size:100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

檢查一下： http ： //jsfiddle.net/qdzaw/1/

Answer 5

你可以加：

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    background-size: 100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

你可以在這里閱讀更多相關信息： css3 background-size

Answer 6

body{
  margin:0;
  background:url('image.png') no-repeat 50% 50% fixed;
  background-size: cover;
}

Answer 7

通過使用屬性css：

background-size: cover;

Answer 8

使用：background-size：100％100％; 使背景圖像適合div大小。

Answer 9

要保持縱橫比，請使用background-size: 100% auto;

div {
    background-image: url('image.jpg');
    background-size: 100% auto;
    width: 150px;
    height: 300px;
}

Answer 10

嘗試這樣的事情：

div {
    background-image: url(../img/picture1.jpg);
    height: 30em;
    background-repeat: no-repeat;
    width: 100%;
    background-position: center;
}