Html 用CSS渐变替换背景图像

我使用图像作为id为

标题的固定宽度div的背景，相关CSS规则为

#header {
  background: url("bg.png") no-repeat scroll center top rgba(0, 0, 0, 0);
}

我试图让这个页面更具响应性，这意味着
标题的宽度现在是可变的。在无响应页面中，
标题
元素的宽度始终与背景图像相同，但在响应设计中，元素可以比图像宽或窄。我需要在响应页面中使用相同的背景样式，但是当元素和图像的大小不匹配时，我找不到一种方法。
 你可以考虑

background: url("bg.png") repeat-y top left;
background-size: cover;


编辑：
尝试使用。你试过背景尺寸：封面或
包含
？-这是一个伟大的资源，用于生成CSS背景渐变，如果您选择远离使用图像：您的答案是正确的，但请使用mdn作为参考。许多高级开发人员并不推荐w3schools。特别是在这里。（我不是反对者）有人想详细说明-1吗？我特别选择了w3schools，因为它提供了一种测试多种背景大小选项的简单方法。鉴于这一问题的性质，这可能是Dónal所寻求的。