CSS cropping of background images can create visually appealing layouts by controlling the display of images within an element. Use the `background-size` property to adjust the size, `background-position` to define how the image is positioned, and add `overflow: hidden` to restrict any overflow. This technique enhances aesthetics and improves user experience.