Vacancies available. Click here for more information.
Mike Onslow 10/05/2017 Design,

There are lots of cool ways to make text over a background image stand out. You could put a background colour on the text element or make use of drop shadows as well as a range of different techniques. One that I want to explore today is using filter: invert(1) to make the text transparent, but inverted to the colours of the image behind it.

This a really simply thing to do and can be achieved with just a couple of lines of HTML:

<header>
    <h1>The Final Frontier</h1>
</header>

... and a small amount of CSS:

header {
    overflow: hidden;
    height: 100vh;
    background: url('https://static.pexels.com/photos/92977/pexels-photo-92977.jpeg') 50%/ cover;
    flex: 1;
}
h1 {
    height: inherit;
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font: 900 20vmin/50vh 'Montserrat', sans-serif;
    text-align: center;
    filter: invert(1);
    display: flex;
    align-items: center;
    justify-content: center;
}

Let's break it down to explain each item a little better. The HTML is fairly self-explanatory; we are creating an element which will have a background image applied and the text that will sit over the top. Simple.

Moving onto the CSS, we first make sure that the element fills up the entire screen using the vh rule (vertical height) and centrally align the background image by positioning it 50% of the way down. I'm also going to use flex in this example

With the text, we first need to make sure that it's essentially invisible. We do this by setting color:transparent. Now we can set the text to clip the background behind it using -webkit-background-clip: text. It's worth noting that this is WebKit only and highly experimental, so don't expect massive browser support.

Most of the other CSS you see above is just configuring the general appearance and positioning of the text. The key one is the filter: invert(1) which inverts the colours of the background image, clipped to the text, giving a really cool contrast that not only looks good but makes the text clear and easy to read:

Space - The Final Frontier

This article was inspired by an article on the excellent CSS Tricks.

Comments

Share this post

Subscribe to our newsletter

Call Today

01787 319658/0203 0960 360