如何用CSS实现背景填充屏幕右侧？

你的当前代码中，渐变背景默认从左上角开始绘制，结合background-size: 50% auto和repeat-y，会占据屏幕左侧50%的区域。要让它填充右侧，只需要调整背景的起始位置即可，有两种简单的实现方式：

方式1：添加background-position属性 #

直接在原有样式中加入background-position: right;，让渐变块从屏幕右侧开始渲染：

<body id="bg" style="padding: 2%; background: linear-gradient(#e66465, #9198e5); height: 100%; background-repeat: repeat-y; background-size: 50% auto; background-position: right;"></body>

background-position: right等价于background-position: 100% 0，都能让背景的水平起始点对齐屏幕右侧。

方式2：使用背景属性简写 #

可以将背景相关的属性合并到background简写中，让代码更紧凑：

<body id="bg" style="padding: 2%; background: linear-gradient(#e66465, #9198e5) right / 50% auto repeat-y; height: 100%;"></body>

简写的顺序规则是：背景图像 → 位置 → 大小 → 重复方式，效果和方式1完全一致。

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