The issue is the bg image and no styling when pulled from collection, you style it by using the styling for the collection item itself. There are restrictions however if you try to use the built in color overlay it will return the whole thing to default. In which case for collection pages you have to add the overlay div. For use on a section in collections it is best to put a div in the section set absolute positioning and then apply the bg image to the div.

one added note, it is best to resize you images before uplaoding to fit the container you are using or close to. Because when I apply cover and center to the images they all don’t fit in the slider. With vital parts cut out. If you don’t want full slider images you can set to contain and then put repeat on none. But if your images are different sizes it can look odd as well.

for hero images I use a width of 1500 usually i find it covers the most common desktop and laptop. Then depending on VH That gives me a rough idea of how long to make it 40 VH roughly 400px. There may be other methods people use but it saves a huge headache by setting an image size beforehand.