Image Features

Discuss some image features such as image location, height, and width.

Location

We can specify the part of the box that will contain the image. The default is .bg-clip-padding, where the background image displays in the content and padding parts of the box but not in the border. We can also make the image cover the border with .bg-clip-border, or limit the image to only the content and not the padding with .bg-clip-content.

More interestingly, .bg-clip-text shows only the background image inside the shape of the content text.We want to combine this with .text-transparent, so the text color would not block it. However, doing so, we can see the background color or image only in the text. If we combine this with gradients, we get a text gradient as shown in the below example:

Get hands-on with 1200+ tech skills courses.