如何让图片按VH/VW完全拉伸适配网站背景？

DevOps 小满

2026-8-3

实现Velo网站背景图拉伸铺满效果的即插即用方案

以下是直接可用的Velo代码，能让装饰性背景图强制拉伸铺满整个页面，完全忽略原宽高比：

步骤1：准备页面容器

先在Wix编辑器中添加一个全屏容器元素：

设置容器的定位为「固定」，覆盖整个页面范围
将容器层级设为最低（避免遮挡其他页面内容）
给容器命名为 pageBackground

步骤2：添加Velo代码

将以下代码添加到目标页面的代码编辑器（若要全站生效，放到site.js文件中）：

$w.onReady(function () {
  // 获取全屏背景容器
  const bgContainer = $w('#pageBackground');

  // 设置背景图样式：强制拉伸铺满
  bgContainer.style = {
    backgroundImage: 'url("https://static.wixstatic.com/你的图片URL")', // 替换为你的图片链接
    backgroundSize: '100% 100%',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center'
  };

  // 监听窗口尺寸变化，确保缩放时背景依然铺满
  window.addEventListener('resize', () => {
    bgContainer.style.backgroundSize = '100% 100%';
  });
});