Website design is a constantly changing field. What's popular one year might be completely dead the next. Technologies come and go (anyone remember Flash?), and the devices people use to access the web change.
And so here at PageCrafter, we are extremely interested in anticipating upcoming trends, and even in trying to create them ourselves. Enter: the Knockout Background.
What are Knockout Backgrounds?
By "Knockout Backgrounds," we are simply referring to using transparent PNG silhouettes with parallax CSS backgrounds.
Sounds complicated, but it's not actually too difficult. For illustrative purposes, view our logo below.

Pretty cool, right? And this is just one use scenario. There are essentially unlimited ways you can use this. It adds a really cool, 3D effect to a site without feeling contrived or dated.
In the below example, you can see how we used this effect nicely on the site we built for our client, Unmapped Brewing.
Notice how the background is different for each brew, and is tailored to the one it represents. We get comments constantly from clients and visitors to that site about how cool it is.
You can even get creative and use textures as the .PNG that blocks the background. In this since it isn't really knocking anything out, but there is a lot you could do with it!
Okay, so maybe this wasn't the most imaginative usage but it was better in my head. Hopefully it will give you some ideas! Obviously this one in particular would work better on a page with a black background.
So who invented Knockout Backgrounds?
I wish I could say we did, but I don't think that's technically accurate. I've seen it around the web for a while, and people have definitely been trying it in some form or another pretty regularly.
However, I just haven't seen the widespread usage that I expect will come just yet. We are adding this effect to all of our new websites and coming up with some really fun ways to use it.
I would be surprised if this didn't catch on heavily in 2018. We may not have invented it but we are doing our part to promote it and give it a name.
How do I use Knockout Backgrounds?
There are two basic methods. The first method involves using a .png image with transparency that reveals the background behind it.
- Create a .PNG file with some kind of cutout in the middle. It could be wording, it could be a shape, it could be anything! Get creative. You can even add drop shadows for an added effect. The rest of the .PNG should be the same color as the background on your page.
- Add the .PNG to your web page.
- Add the following CSS:
background-image:url('https://example.com/linktobackgroundimage.png'); background-attachment:fixed; background-size:cover;
That's it! Very easy. You could also use a CSS class to accomplish the same thing.
Basically all we're doing is adding a parallax background image directly to our .PNG image using CSS. The sky is the limit from there.
The second method is probably a bit more versatile, and allows you to add an image using a regular img element and adding a CSS mask which will effectively mask around it. The downside is that the image won't move in a parallax fashion. This method is better used when you want to mask a complicated .jpg image but don't want to simply create a .png with that transparency since the image would become too large.
- Add any img element and give it a class name like "mask"
- Add the following CSS with "mask.png" being the mask shape
/*knockout backgrounds*/ .mask { -webkit-mask-image: url(mask.png); mask-image: url(mask.png); mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
- That's it! The image will now be masked based on the .png in front of it.
This method is fairly versatile. I do recommend making sure the mask and the underlying image are the same size, in this case.
Knockout Backgrounds tips and tricks
We've been working with these for a little while now, and have some tips and tricks to share with you.
- You need to use a .PNG file to have transparency, and generally vectors and simple illustrations make the best .PNG files. If you try to use actual photos, you'll find that even small .PNG files get huge!
- Make sure the background image is no wider than the .PNG file you are using, especially if you have a bunch of these on one page. You'll want to consider page load speed, and any space that's wider than the image will do you no good so there's no point in having it.
Very tall, skinny images work best for smaller knockout backgrounds.
- Try using background images that enhance the meaning of the cutout shape. For example, you could have a cutout of a cat with a background image of a nice photo of a cat playing.
This can really clean up a page that would otherwise be cluttered with busy elements.
- In general, you are going to want to use it somewhat sparingly. You don't want to overwhelm your visitors!
This is our pick for the #1 website design trend of 2018. Send us your examples of this technique in use and we might include them on this page.