如何使用CSS重復背景圖片

Question

我需要在我的應用程序中將welcome.blade.php中的背景圖像gried.png圖像重復顯示。 我需要為此在css文件夾中創建類選擇器文件。 這是public / css文件夾中的My welcome.css文件

.background-image{
    background-image:transparent url("/imgs/grid.png");
    background-repeat:repeat;
}

這是我的welcomeblade.php文件

<link rel="stylesheet" href="/css/welcome.css" /> 
<div class="background-image"></div>

但是這段代碼沒有產生任何結果，我該如何解決？

Answer 1

transparent不是background-image的有效值。 這是background-color的值。

.background-image {
    background-color: transparent;
    background-image: url("/imgs/grid.png");
    background-repeat: repeat;
}

應該管用。

在此處查看（圖像的網址與此不同）： https : //jsfiddle.net/h0revzu5/

Answer 2

只需嘗試background-attachment：repeat;

Answer 3

背景重復的示例：

 body { background-image: url("https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png"); background-repeat: repeat; } 

要么

同樣，默認情況下，設置背景時會重復

 body { background: url("https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png"); } 

默認的background-color是background-color:transparent;