css - How do I find the image URL to, in order to place a background image?

Question

I've found instruction on where to place this image body { background-image: url(example1.jpg); }

BUT Cant figure out how to format or get the "url"( ) it's looking for. Do i need to save it in a different place, or format my image differently...

Answer 1

你可以使用这个 CSS：

body {
    background: transparent url(http://mydomain/content/image.jpg) no-repeat 0 0;
}

或者当然：

body {
    background-image:   url(content/content/image.jpg);
}

您的 URL 可以是absolute，如第一个示例中一样 - 或relative，如第二个示例中。您必须注意，放置相对路径时，它是相对于您的样式表定义的，而不是您的 HTML 文档。目录示例：

- webroot
    index.html
    img/image.jpg
    css/main.css

当您将上面的定义放入index.html时，URL 将是：

url(img/image.jpg)

但是当你把它放在main.css里面时

url(../img/image/jpg)

最后一个想法：如果路径中有空格/空格，则必须将 url 用单引号或双引号括起来，例如：

url('image/my image.jpg')

Answer 2

您可以使用任何标准 url，例如 http://example.com/xx.jpg 或来自您的目录 /images/xx.jpg 这就是您要查找的内容。

Answer 3

您将 url 相对于样式表，而不是站点根目录。例如，如果你有这个结构：

root
- images/
  - image.gif
- css/
   - styles.css
- index.html

您的网址路径将是url('../images/image.gif');

在不相关的注释上（只是因为前几天我发现了这一点），如果您使用的是 .htc 文件（例如用于 IE 圆角的 PIE.htc），那么行为 url 需要相对于根和不是样式表。