Image Features

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


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.