Introductory remarks on the common practices and tendencies in using CSS background images.

• Repeating backgrounds are often avoided in modern CSS design.
• Designers typically use 'background-size: cover' to make images fill the space without repeating.

The speaker introduces two little-known CSS properties for background repeat: 'space' and 'round'.

• Many seasoned CSS developers are unaware of the 'background-repeat: space' and 'background-repeat: round' properties.
• These properties offer additional control over how background images repeat and fill the space.

A refresher on how repeating backgrounds work in CSS, including the basic repeat properties.

• Background images naturally repeat to fill the available space, cropping off as necessary.
• Control over repetition can be achieved with 'background-repeat: no-repeat', 'repeat-x', and 'repeat-y'.

The speaker explains the 'space' property, which prevents cropping of images and maintains even spacing.

• Using 'background-repeat: space' ensures that the image is never cropped and is repeated with even spaces in between.
• As the space available changes, the number of images adjusts accordingly, without any cropping.

The video discusses the 'round' property, which adjusts image sizes to fill the space without gaps.

• 'background-repeat: round' stretches or shrinks images to eliminate gaps and fill the space entirely.
• This property may distort the image, making it less practical than 'space' for certain use cases.

The speaker demonstrates how to use the 'space' property in a practical scenario with a star rating system.

• A star rating system is presented, which dynamically adjusts the number of stars based on user selection.
• The 'space' property is used to ensure even spacing between stars without image cropping.
• Custom properties in CSS are utilized to calculate the width and spacing needed for the selected number of stars.