如何修改CSS配置，阻止背景图片在X轴和Y轴方向重复显示？

问题描述 #

我是CSS/HTML新手，目前使用来自Eggy的基础模板。模板CSS中提供了背景图片设置选项，但无论上传的背景文件尺寸多大，图片都会在X轴和Y轴方向重复平铺，请问要如何设置才能取消重复？
相关代码行如下：
$bg_image:"IMG_URL";

解决方案 #

要取消背景图片的平铺效果，只需要添加background-repeat属性控制背景重复规则即可，具体操作如下：

• 找到模板中实际使用$bg_image变量的CSS样式块，通常是作用于body标签或页面最外层容器的样式，原有代码结构大致如下：

body {
  background-image: url($bg_image);
  /* 其余原有样式 */
}

• 在该样式块中新增一行代码background-repeat: no-repeat;，即可同时取消X轴和Y轴的平铺效果。

如果需要进一步优化背景的展示效果，还可以搭配以下常用属性：

• 背景固定不随页面滚动：background-attachment: fixed;
• 背景等比例拉伸铺满整个容器：background-size: cover;
• 背景居中对齐：background-position: center;

如果你的模板支持自定义背景相关变量，也可以参考现有变量的写法新增一条变量定义：
$bg_repeat: "no-repeat";
再找到background-repeat的调用位置替换为该变量即可，实际效果和直接写属性值完全一致。

内容的提问来源于stack exchange，提问作者Portal_