The image is from Figma on 1600px width.
My question is about the background. In order for the header links to be shown, the background has to be extended as it is on the picture.
But on larger screens lets say 1920, if we place the property “background-size: cover” the image is not shown so nice as you can imagine.
So how do you handle situation like that, that you would like the code to match the design as better as it can be.
Do you stretch the image? Maybe leave the image as it is and change the color of the color of the header?
Unfortunately the image you have chosen as your background is not a good approach for a responsive web design.
You simply cannot have all of the image show at its correct aspect ratio and at the same time fill the screen. That is a physical impossibility in the real world as in the web world.
If you need ‘Art direction’ rather than simple image resizing you should be looking at the picture element to supply a number of different versions of the image that are more suitable to the wider (or smaller) screen display.
The only other solution would be to remove some elements from your background (such as the truck and the people) and overlay them on a more nondescript background.
Designing for the web is about making suitable choices. That usually means catering for your content first and then fitting the design around the content (not vice versa). The choice of images are crucial for responsive design as you need to cater for an infinite variety of screen sizes so you must choose with care and not use images that only work at one size.
Alternatively you could limit your layout max-width to 1600px so that the image doesn’t stretch more than you want. You could also try moving the background-position to show more of the centre of the image or indeed start from the bottom. It may look worse but is worth a try.
In the end its a design question methodology rather than a css fix.
