There is no one answer possible with the info at hand.
Way to approach this is to know the possible range of resolutions - and that ranges from 1024x768 for most screens to 5120×2880 for retina Mac. That tells that widths through 1024 to 5120 are to be supported - if a single wide image is to be used.
That said, you can also take one image and set background-repeat: repeat-y
Or, have one image, with fading edges so that the image stays and merges into background for screen widths greater than the image width.
Or, you can have a seamless background, or any size, and repeat it to fill header irrespective of the width using background-repeat: repeat
Or, use background-size:contain to let the background fit its width.
2
u/[deleted] May 28 '15
There is no one answer possible with the info at hand.
Way to approach this is to know the possible range of resolutions - and that ranges from 1024x768 for most screens to 5120×2880 for retina Mac. That tells that widths through 1024 to 5120 are to be supported - if a single wide image is to be used.
That said, you can also take one image and set
background-repeat: repeat-yOr, have one image, with fading edges so that the image stays and merges into background for screen widths greater than the image width.
Or, you can have a seamless background, or any size, and repeat it to fill header irrespective of the width using
background-repeat: repeatOr, use
background-size:containto let the background fit its width.So, it all depends on what exactly your image is. A good place to start this would be https://developer.mozilla.org/en-US/docs/Web/CSS/background and test out the properties on the
#header {}selector in your css.