I am trying to create a full width background image for my theme. For some browsers it looks okay, however for some browsers it does not look good (it seems as if pixels are fixed instead of being responsive to the device). Also if I zoom out problems occur with the background image. Please see attached image to see what goes wrong. It cuts off and does not resize, so it appears as if dimensions are fixed instead of responsive. Am I using the wrong settings? Because I do see some nice pre-built BeThemes that do have some nice full-width background images per section that scale perfectly when zooming in/out or using a screen with other resolution.
Some example pre-built be theme websites where I see this full width background image thing implemented are bemarathon (the section with the clouds), bewebinar (especially the pattern section), beprint (the upload your files online section), beapp5 (the challenges section & the our core features section, I think this section is the solution I am looking for). What would be the best way to implement this fade section full width? I think the challenges section of betheme's BeApp 5 might be the solution I am looking for but I can't install the pre-built websites to look how it's made without affecting my current website.