首页背景图片不能自适应和出现背景图片平铺问题

[Koevn1]

主题版本：butterfly 4.13.0

我看butterfly 文档首页背景都能随浏览器窗口大小自适应背景图片大小，而且浏览器窗口最大化也没出现背景图片出现平铺问题，但我同样拿butterfly文档首页背景当我的blog首页，还是出现不能自适应大小和背景图片平铺问题。

这是butterfly文档首页背景

这是我blog使用首页的背景图片，不能自适应显示

这是我blog使用首页的背景图片，浏览器全屏，右侧出现背景图片平铺问题，看着很别扭！

图片都按butterfly文档首页背景尺寸，结果都是出现以上问题！

请问这种有办法解决吗？

[jerryc127]

你是不是修改了主题或者改了 header 的css

[Koevn1]

没有修改主题header的css，打开就这样！

[Koevn1]

这是主题配置

# The banner image of home page
index_img: https://jsd.012700.xyz/gh/jerryc127/butterfly_cdn@2.1.0/top_img/index.jpg

# If the banner of page not setting, it will show the top_img
default_top_img: https://jsd.012700.xyz/gh/jerryc127/butterfly_cdn@2.1.0/top_img/index.jpg

只有这种带域名URL的，才能自适应和没有背景图片平铺问题，但是只要引用本地文件路径，就出现我说的问题，难道下面butterfly文档是我理解错误？

不是应该把静态文件放到hexo 博客跟目录下的source里，然后主题配置引用source里的静态资源路径？
为什么这样配置后，就出现我上面说的问题？

有没有大佬求解？

[jerryc127]

你不如推上去 把网址给我

[Koevn1]

刚刚搞明白了，这个主题背景图片不能使用本地相对路径，需要网站的绝对路径才能正常显示，但这不方便调试（我不喜欢上传图床在引用）！

希望后续有这个功能。

[jerryc127]

你写的途径是什么

[Koevn1]

我最开始写的图片路径是'url(/img/abc.png)'和'url(./img/abc.png)'，就出现我开始说的问题，后面直接写域名加/img/abc.png路径，图标背景不能自适应和平铺问题才解决。

我原来用的主题习惯页面背景图放在hexo博客source里，文章里的背景图，跟文章同目录文件里，所以习惯引用图片就是/img/abc.png（背景图片）和![](abcd.png) 文章图片。

所以能改进配置文件里引用静态资源文件不加域名就好了，不然本地还得架个web服务器反代，然后搞个dns或者本地hosts文件加解析什么的，调试起来相当麻烦！

[jerryc127]

直接写路径/img/abc.png url这些主题会添加

[Koevn1]

直接写/img/abc.pn路径是解决了上面网页背景问题，但是又发现文章图片404无法显示的问题！由于我不喜欢把文章图片都放到网站source文件夹里，图片文件多了找起来麻烦，所以hexo创建文章时自动创建文章资源文件夹，我就把文章图片全放到该文件夹里。

我的文章图片是这种结构

hexo  		             # blog 目录
├── _config.butterfly.yml   # 主题配置文件
├── _config.yml

....

├── source
│   └── _posts
│   	├── 6Af5hQKp        # 文章文件夹
│   	│   ├── test01.webp
│   	│   ├── test02.webp
│   	│   ├── test03.webp
│   	│   └── test04.webp
│   	└── 6Af5hQKp.md     # 文章markdown文件
│   
└── themes         
    └── butterfly

在6Af5hQKp.md文件里引用图片是![test01]( test01.webp)

正常在文章里显示图片URL是以下URL结构

http://domain.com/t/625a25e6/test01.webp

其中/t/625a25e6 是文章URL

但是butterfly主题显示的URL是以下结构

http://domain.com/test01.webp

这就导致文章里引用的图片出现404

[jerryc127]

直接写/img/abc.pn路径是解决了上面网页背景问题，但是又发现文章图片404无法显示的问题！由于我不喜欢把文章图片都放到网站source文件夹里，图片文件多了找起来麻烦，所以hexo创建文章时自动创建文章资源文件夹，我就把文章图片全放到该文件夹里。

我的文章图片是这种结构

hexo  		             # blog 目录
├── _config.butterfly.yml   # 主题配置文件
├── _config.yml

....

├── source
│   └── _posts
│   	├── 6Af5hQKp        # 文章文件夹
│   	│   ├── test01.webp
│   	│   ├── test02.webp
│   	│   ├── test03.webp
│   	│   └── test04.webp
│   	└── 6Af5hQKp.md     # 文章markdown文件
│   
└── themes         
    └── butterfly

在6Af5hQKp.md文件里引用图片是![test01]( test01.webp)

正常在文章里显示图片URL是以下URL结构

http://domain.com/t/625a25e6/test01.webp

其中/t/625a25e6 是文章URL

但是butterfly主题显示的URL是以下结构

http://domain.com/test01.webp

这就导致文章里引用的图片出现404

主題不負責渲染
hexo 的邏輯就是那樣
它們也提供了解決方法
https://hexo.io/zh-tw/docs/asset-folders
多看文檔