I didn’t mean you used position:fixed, just a static width in px (I’ve named background-position instead of background-size, my bad).
You should learn about what “cover” does. Cover will make your image “as big as possible”, even if your image gets cut at some point, because it keeps your image’s aspect ratio.
Let’s say you’re trying to fit a 200x100px image into a 100x100px container, and let’s say you center your image. Your image will be maxed out at 100 height, but you will lose 50px on the left and 50px on the right, cut off by the left and right edges of your container.
You should spend a little more time about learning how CSS works though. Your methodology is wrong. I mean it is not “wrong” because it’s doable and there’s always many way to do something but with what you have in mind you should really start again from scratch.
Divide your big images in more manageable blocks, so you have more control over them.
I’m attaching a small image of what you “should” at least try to do with your layout.
From background to foreground :
- A big image with your background (let’s say your blue gradient)
- Three divs
- In your divs, three images (your icons)
Good luck with all that !