Hot new CSS rules to try now

Background-repeat (Round and Space)

Background-repeat has been a stable part of CSS for what seems like an eternity, but there are two lesser-known options available – Round and Space. Both of these options work by ensuring that 100 per cent of the background image declared is repeated and visible at all times. They work in slightly different ways and will make a subtle difference to how images appear. 

The round option resizes your image to fit

The round option resizes your image to fit

background-repeat: round; repeats your background image without ever cropping the image. Instead, it will resize the image evenly until there is enough space to fit in an extra tile.

The space option creates extra space between your tiles

The space option creates extra space between your tiles

Background-repeat: space; tiles the image in both directions. It's similar to Round, except instead of resizing the image until there is more space to display another tile, it will instead create white space between the tiles until another row or column can be shown.

Neither of these options is that new, but they will give you that little bit of extra control over the way tiling takes place over various viewport sizes. What is also very useful about these options is that they are supported by every browser.

aspect-ratio media queries

The introduction of media queries changed the way we build websites. We were given the opportunity to build our layouts depending on the way the user viewed the page. More often than not this would be based purely on the viewport width or height, but recently there has been a new option added.

Now you are able to apply CSS based on the page’s viewport via a media query that detects the aspect ratio of the window you’re browsing with. You are also able to detect whether the window matches a maximum or minimum aspect ratio.

Click the icon in the top right to enlarge the image

The code to use for this is fairly simple. It matches the convention used with any other media query declaration – something like:

@media screen and (aspect-ratio: 16/9)  {
 Your CSS
}
@media screen and (min-aspect-ratio: 16/9) {
Your CSS }

There are only a few scenarios in which aspect-ratio media queries would be useful. If you are building something specifically for mobile devices, you could use the min/max aspect-ratio to target whether the user is browsing in landscape or portrait mode (although this use could also be addressed with orientation media query). 

However, aspect-ratio is supported by all major browsers support it, with Internet Explorer support going as far back as version 9.

Blend-mode

Applying background images is typically a stable part of every project build. But sometimes it's good to be a little more creative with our background images, which is where blend-mode comes in.

Instead of just putting the background on top of the background colour, blend-mode combines the background image with the background colour in a defined style. The options you can use are normal, multiply, screen, overlay, darken, lighten, colour-dodge, saturation, colour and luminosity. 

Clockwise from top left: overlay, difference, chained effects, luminosity (click the icon in the top right to enlarge the image)

Let's take a look at some of the options. In the image above, we have:

Overlay (top left)
Mixes both the background image and colour together to echo the darkness or lightness of the backdrop area.

Difference (top right)
Subtracts the darker colours from the background image/colour from the lightest shades, to give a very high contrast effect.

Luminosity (bottom left)
Preserves the top colour while fading hue and saturation of the background, to give a washed-out, old photo look.

The code to use for blending your background is fairly simple – all you need is one line of CSS to merge the background image with the background colour:

background-blend-mode: *blending-option*;

When it comes to applying blends to your background image you needn’t use just one mode. You can chain multiple blending modes together to create a more unique effect (shown in the bottom right of the image above) by using something similar to the code below:

background-blend-mode: multiply, darken;

Blend modes are supported in almost all browsers (including all versions of Microsoft Edge), with the exceptions being all versions of Internet Explorer and Opera Mini. 

Next page: Object-fit, shape-outside, currentColour and more

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Mirum is a 'borderless' agency of over 2500 digital savants, storytellers, technologists and makers. UI team lead Andrew Collinson, interface engineer Paul Sandwell JavaScript engineer Dan Hughes joined forces to put together this article.