What sizes are required for a background-image set for responsiveness?

[anjanesh1]

I’m having some difficulty with the top banner image at https://neodonya.com/interviews - The designer gave me this - https://neodonya.com/background/banner.jpeg - but its of a lower resolution when seen on a 27" screen.

I want to know what image resolutions should I ask my designer to give to make use of image-set ?

I can all examples having 1x and 2x but I would like to have an image for each standard screen resolution.

[ralphm]

Personally, I would use one version of a background image, making it high enough resolution to look nice on all screens. Your file is currently 1200px wide but still only 59KB, which isn’t bad.

But I would also split the image into two: the rain in one, and the woman in the other. The rain doesn’t have to be as high resolution as the woman, and you’ll have an easier time placing her in the right position when she’s on her own.

[PaulOB]

Just change the background-position and the image will stay in view for everyone.

.header_header_wrapper__4k1CP{
background-position:86%;
}

@anjanesh1

I would like to have an image for each standard screen resolution.

You’d need about 300 images then

Not to mention that half the population do not maximise their browser so those sizes are a bit pointless. I never have my browser maximised and often have two or three browsers open at the same time.

The approach you need to take for responsive design is to create images that are fluid enough within a certain range so that you don’t need hundreds of them. In your example I don’t see a need for more than one image unless you want the higher resolution devices to get better quality or oerhaps a smaller image for art direction on smaller screens.

[anjanesh1]

Thanks for your input PaulOB. I was wondering what’s that LiveCSSEditor you used to edit the properties - Inspect Element does the same, right ?

[PaulOB]

[quote=“anjanesh1, post:4, topic:433674”] I was wondering what’s that LiveCSSEditor you used to edit the properties -
[/quote]

It’s a chrome extension and it’s very useful for making quick edits and changes rather than messing about with the web inspector.

The changes are persistent the next time you visit the same page so are ideal for testing and trying things out.

Once happy with the changes you would then copy it or incorporate into the real css file.