Stretching the image for different screen sizes

Question

I wasn't too sure on what to search for my answer. Basically I have a design made, and the header can be seen here .

The width of the document there is 1200. I can get hold of a bigger version for a width of up to 2560, but how should I go about using the image? Should I use CSS media queries and use different images for a certain screen size? Note: this isn't a mobile site design; I just need to function with all computer screens.

I'm sorry if this has been asked/answered before but as I said I wasn't 100% sure on what to search.

Answer 1

You can define the height and the width in %, and use one image. But i think you should use different images for the different size, because it's mobile, and if you can avoid to your users to load unnecessary data, do it.

Answer 2

If it's a foreground image, then just use percentage widths. If it's a background image, you can use the background-size attribute.

Answer 3

尝试这个

 background-size: 100% 100%;

Answer 4

Take a look at this script . It basically identifies the screen size and then loads appropriate css where you can use images that match the screen.

Changing background size in % is not a good option (easiest though) because browser will load full image (largest) anyway and then rescale it to match the size. This could degrade your page loading performance if you use large images.