用CSS渐变替换背景图片

Question

I use an image for the background of a fixed-width div with id header , the relevant CSS rule is

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

I'm trying to make this page more responsive, which means that the width of header is now variable. In the unresponsive page the header element was always the same width as the background image, but in the responsive design the element could be wider or narrower than the image. I need to use the same background style in the responsive page, but I can't find a way to do this when the size of the element and image don't match.

Answer 1

You could consider

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

W3schools has more info on the background-size property

EDIT: Since that W3Schools seems a form of heresy, here is another reference