刚开始只是一个简单的想法：

这个博客的主页看起来太空空荡荡了，感觉会很无趣，也无法达到主页“介绍”的目的。
而且整个主页就只有中间一行字，多无聊（

鱼逝——

咱寻思着，不如给主页加个背景吧？
当时看中这个主题的原因其一是它的极简风格非常戳我，此外就是能直接在config.toml文件里设置背景图片了。但可惜的是最后并没有用它自带的设置背景图片的方式（悲）

接着在一系列绕远路后，终于在主题自带的网页范例文件中，找到加入背景图片的方法。（不直接写文档里，差评）

#...
[params]
  #...
  # 给主页设置背景图片
  backgroundImage = "dir/to/backgroundimage"
  # 如果需要的话，还能给背景加上黑色遮罩
  backgroundEffects = true
  #...

找到了这个方法，接下来的步骤就很简单了，咱用krita，再加上以前约的稿子一起，绘制好背景图片然后往里面一塞，诶嘿，成了。
但是，别高兴太早！
咱发现这个背景图片并不能适配移动设备，在手机平板这样的竖屏设备上，背景图好大一块跑屏幕外面去了！
而且由于背景的主题刚好在右侧，导致它根本看不到了，这样可不行……

怎么办呢？

考虑到咱这背景图片很简单，只是蓝色的底色，加底部黄条，再加右下的设定，元素简单结构清晰，那干脆拆分开来，最后在网页中拼合起来呗~
于是咱立刻动手，把图片的拆分给做好了。（甚至还用realcugan-ncnn-vulkan给抠出来的图片超分了一下）
但是之前认为最简单的加入网页的这部分，到最后却无从下手了：咱完全不知道应该修改哪个文件，应该怎么写才能达到想要的效果。
也因为这个，咱活生生鸽了两天uwu

虽说鸽了但也没完全鸽，咱还是花了点时间研究了一下hugo的运行方式，再加上大佬的外援，最后再来点css的现学现买

最后咱终于找到解决方法了！

先用html写了个网页做测试：

<!DOCTYPE html>
<html>
  <body style="background-color:#A7DFFA;">
  <div style="
    background-color:#F8E9A4;
    position: fixed;
    left: 0;
    right: 0;
    height: 10%;
    bottom:10%;
  "></dev>
  <img src="logy2x.webp" style="
    position:fixed;
    bottom:0;
    max-height:60%;        
    max-width:80%;
    right:5%;
    ">
  </body>
</html>

很简单的三部分：背景蓝色的body，黄色的div横条，和图片。样式咱也全都直接写在style里面。 因为咱懒w。
最后复制themes/hello-4s3ti/layouts/index.html到layouts/index.html然后修改其内容。（因为hugo中，根目录相同位置的文件的优先级大于theme里的文件，所以可以直接复制一份出来而不必改主题里的文件）
为了不影响已有元素的布局，在main中所有元素的后面加上测试里的内容，并给它们设置个负值的z-index让它们显示在底部充当背景。
最后，保存，运行。测试。

实际效果在电脑和手机上都很完美，max-宽高也限制了在过于离谱的屏幕上，图片不会拉伸或者跑出屏幕，Nice~

完工！

另：因为把背景中元素都拆开了，于是寻思着要不要顺便利用一下这个特性，做个划入动画啥的，结果发现css可以直接实现动画效果，js都免了，于是两三下给加了几行动画的代码，搞定~