如何让网站背景图片从上到下拉伸铺满？

问题根源 #

• 你给<body>设置了background-repeat: repeat-y，这个属性会强制背景图在垂直方向重复平铺，这就是右下角出现重复图片的直接原因
• <body>元素默认高度仅包裹内部内容，不会自动占满浏览器视口高度，当页面内容高度不足视口时，背景图覆盖范围不够，就会触发重复规则
• background-size: 50%将背景图宽度设为容器的50%，高度按原图比例自动缩放，一旦容器高度超过缩放后的图片高度，就会出现纵向重复

修复方案 #

修改<body>的内联样式，调整以下几个属性：

<body id="bg" style="padding: 2%; background-image: url('{% static 'images/pexels-photo-10768835.jpeg'%}'); background-repeat: no-repeat; background-size: auto 100%; background-position: right; min-height: 100vh;">

属性说明 #

• background-repeat: no-repeat：禁止背景图在任何方向重复
• min-height: 100vh：让<body>至少占满整个浏览器视口高度，确保背景图能覆盖到页面底部
• background-size: auto 100%：保持图片宽度按比例自适应，高度拉伸至容器的100%，实现垂直方向铺满的效果；如果希望图片保持比例且尽可能覆盖右侧区域，也可以替换为background-size: cover，搭配background-position: right center使用

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