Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Making "holes" in background Reply To: [Solved] Making "holes" in background

#158189
paulob
Participant

Hi,

It can be done (sort of) but not in any usable way apart from a CSS trick.

http://www.codepen.io/paulobrien/full/eLjID

The holes are made by using a fixed positioned background which just overlays the original image on top of the gradient and creates the illusion of a hole.

A fixed positioned image only appears if the element is over the space where the image is placed (from the viewport) so you don’t have to specify individual positions for the holes because they will just show the relevant part automatically.

However it all goes to pot when the page scrolls so is of no use other than an example. :)

You will have to do what Paulie_D suggests above and overlay an image of the background in the correct spot or use a png image with holes already cut out.