Difference between background-size:cover and background-size:contain

Question

Visually I can appreciate the difference, but in which situations should I prefer one over the other? Is there any point using them at all or can they be replaced by percent

Answer 1

Contain:- Scale the image to the largest size such that both its width and its height can fit inside the content area. Exmaple: Cover:-Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area. Example: