如何在使用CSS的网页背景中添加重复的PNG图像？

Question

我使用下面的CSS代码：

body 
{ 
    background-image: url(img/tasky_pattern.png); 
} 

我的图片地址是downloads/dist/image/tasky_pattern.png。我不知道我要出错的地方以及如何纠正这个问题。

谢谢。

Answer 1

你链接IMG/tasky_pattern.png的图像是一个叫下载/距离/图像/ tasky_pattern.png文件夹下，但您使用IMG而不是像

看一看修复该错字。这可能是您的图片没有显示的原因。

要检查您的文件引用在chrome中打开您的页面并检查元素。找到说背景图像的CSS代码：url（img/tasky_pattern.png）;然后导航到目标。这会给你完整的URL在浏览器地址栏，会告诉你你在哪里错了你的路径名

Answer 2

您需要确保您的图片存在于您的文件夹中，因此请将您的图片上传到./img/文件夹。然后，你可以使用下面的CSS代码：

body 
{ 
    background-image: url("img/tasky_pattern.png") repeat; 
} 

如果您不能上传图片到您./img/文件夹，您可以将图片上传到一个免费的档案托管网站，并使用他们提供的，而不是链接。

Answer 3

的CSS背景默认行为重演......

您可以指定EXIS

background: url('image_path'); /* it repeats itself */ 
// or // 
background: url('image_path') repeat-x ; /* it repeats only x-exis */ 
// or // 
background: url('image_path') repeat-y ; /* it repeats only y-exis */ 
// or // 
background: url('image_path') no-repeat; /* no repeats */ 

SEE DEMO