Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Cut the background to expose the layer below

Cut the background to expose the layer below


Is there a way to cut a div Background to expose the layer below?, like going from this:

to this:

Any bleeding edge css rule is welcome!


Ok, I've made a sample code:


The birdy background and the #section with a height of 2000px is just for testing by moving the content.

Thanks to everyone!

Problem courtesy of: coma


An element will be transparent if it and all of it's children are transparent (no background-color, no background-image).

To accomplish what you're asking for, here's what I'd do:

  1. Avoid background styling on the container of that group of elements.
  2. Do all background styling on those individual navigation elements via a single image, even if you have to clip it to get it to be flexible.
  3. For the active navigation element, swap the background image to one which has the transparent indent that you want.

See this JSFiddle, forked from your code: This demonstrates the approach I described: make all backgrounds transparent, and use a background image for the cut out. Here's the code that I modified:

#menu:after { background: none; }

#menu > ul > li > ul > li.current:after { content: none; }

#menu ul, #menu li { background-color: transparent; }

#menu > ul { background-color: transparent; }

#menu > ul > li > ul > li > a, #menu > ul > li > ul > li > a {
    background-color: white;

#menu > ul > li > ul > li.current > a, #menu > ul > li > ul > li.current > a:hover {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAAyCAYAAADm1uYqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAV5JREFUeNrs21FKw0AUQNEZcQluR91EVXSFQnUN1f3oEjROSwQrcYyl4HvhHHjQhHzl4yZtZ+rQFIAETtwCQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECFh+sYRyAFMEqogVEd9qmjp+r2wEE9DIVLICIsbr6GiyAyLF6+jzhX0IgRawEC0gTK8ECIsbqeipWggVE8tqLlWABkWJ10+a5d5FgARFidTvGqrvzRrCA/3bXZtPm/bcLrcNavu3Tqv5wfMh2LAuNOba3MnOLoDes3CGaM6VzLExEcN/mfM4DVLDyxukvb0K17O8ZnTOlcx6O6azNeoyWYC1APWDKRGQEh8jRemxzIVjAIqIlWECaaAkWEDVal4IFZInWw/do1aFxb4CgtpuhV4IFZIrWjpXuQIavhzt+wwLSECxAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIECyCEDwEGAGnvSNs6OT13AAAAAElFTkSuQmCC) right center no-repeat;
    color: grey;
Solution courtesy of: KatieK


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Cut the background to expose the layer below


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription