CSS Images lesson

Both HTML and CSS allow you to add images. What's the difference? Images added with the HTML <img> tag have semantic meaning — they are treated as content, and you can add alt text so that search engines and assistive technology can recognize that content.

CSS allows you to add images for decorative purposes and offers a wide range of options to customize them. You can set the background picture, change list item markers and cursor shape, add masks and whole icon libraries, and more. Learn about the many different options CSS offers to add images to your designs.

Exercise #1

CSS background-image property

The background-image property sets the image background for an element. You can define the image's location with the url() function, putting the address in the quotemarks inside parenthesis: background-image: url("space.png");.

In the example above, we also added a gradient — a transition between purple and blue (we'll talk more about gradients in one of the next lessons). Adding gradient data type to your background-image declaration will affect the background image.

There's also a shorthand property background that allows you to set individual properties like position, size, repetition, and more in a single declaration.^[1]

Exercise #2

CSS list-style-image property

By default, browsers use bullet points for list markers in unordered lists. The list-style-image property allows you to set the image you want to use as a list item marker. Use the url() function to specify the image's address. In this example, the style rule assigns a transparent PNG image "leaf.png" as the list marker for all the items in the unordered list.

Exercise #3

CSS border-image property

If you're tired of plain boring borders, good news — CSS allows you to customize them fully. Use the border-image property to draw an image around an element that will replace its regular border. To add the image, specify its address with the url() function. You can tweak it if you want the image to be sliced, repeated, scaled, and stretched.^[2]

In the example, the value 30 sets image offset to 30 pixels and the value round means that the image's edge regions are repeated to fill the gap between each border.

Pro Tip: You should also specify border width, style, and color with the border property anyway, in case the border image fails to load.

Exercise #4

CSS mask-image property

The mask-image property sets the image used as a mask layer. With this layer, you can hide some portions of an element while revealing others. In the example, we set a photographic background as the element's background and added a heart-shaped SVG graphic as a mask layer.

The image type should support transparency, so your best options are SVG and PNG. Use the url() function to set the address of the image you want to use as a mask.

Exercise #5

CSS shape-outside property

As we mentioned before, all HTML elements are represented as square or rectangular boxes. This means that all inline content like text wraps around elements' margin boxes. But what if you have a round picture? For example, a photo of the Moon. And you want the surrounding text to wrap around the shape of the Moon.

The shape-outside property defines the element's shape, allowing us to wrap text around complex objects rather than simple boxes. You can use simple shapes like circles or ellipses or more complex polygons.^[3]

Exercise #6

CSS cursor property

By default, browsers display the mouse pointer over any blank part of a web page, the gloved hand over any linked or clickable item, and the edit cursor over any text or text field. The cursor property allows you to change the cursor shape or use custom images as cursors.

To add one or several cursor images, specify their addresses with the url() function, separated by a comma. The declaration must end with a generic cursor keyword value^[4] in case the browser fails to load images. In the example above, this value is a pointer.

Pro Tip: If the url doesn't have special symbols, quotation marks are optional.

Exercise #7

Adding icon library with CSS

Visual content like icons in navigation menus or alongside important information can be a great advantage. Luckily, nowadays, you don't need to create icons from scratch — you can just link an icon library like Google Material Icons, Font Awesome, and Bootstrap Icons without downloading or installing anything.

Adding icons from the library requires several steps:

Link the CSS file of the icon library in the <head> tag
Create an <i> element with the class material-icons
Search for the icon's name on the library's website
Add the icon's name between the start and the end tags

Because icon libraries are actually fonts, you can use CSS styles to adjust the icon's size, color, and shadow, just like for any other text on the web page.

Exercise #8

CSS border-image-source property

The border-image-source property allows you to specify the address of the image you want to use as a custom element's border.

Another way to set the border image source is with the border-image shorthand property. This property allows you to set the address, outset, repetition, width, and how the image will be sliced in one declaration.

Exercise #9

CSS mask-image property

To add a mask layer, use the mask-image property and specify the image source with the url() function.

This property also takes gradient data type.^[5] For example, you can set a linear-gradient mask to make the top of the background transparent, fading towards the opaque bottom.