Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save omurphy27/5243251 to your computer and use it in GitHub Desktop.
Save omurphy27/5243251 to your computer and use it in GitHub Desktop.
CSS Transparent Background Image Pattern Overlay
/*Transparent pattern placed over an image, like we see on the bootstrap homepage: http://twitter.github.com/bootstrap/index.html*/
div {
width: 200px;
height: 200px;
display: block;
position: relative;
background: url(images/background-image.png);
}
div:after {
content: "";
background: url(http://subtlepatterns.com/patterns/bo_play_pattern.png) repeat;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
/*The most important thing, besides using :after is to set all the positioning (left, bottom etc.) to 0, otherwise it won't work, also be sure to
have absolute positioning and set the z-index to -1
also you might have to put a z-index value on the regular div it seems
here are more resources: http://css-tricks.com/snippets/css/transparent-background-images/
and here: http://nicolasgallagher.com/css-background-image-hacks/demo/opacity.html
This also works well if the lower image is fixed, and the transparent image isn't, i can create a pretty cool effect like here:*/
#main-image {
border-top: 1px solid #c9c8c8;
border-bottom: 1px solid #232323;
height: 420px;
background: url(images/main_image.jpg) fixed no-repeat center;
position: relative;
z-index: 16;
}
#main-image:after { /* add the transparent pattern overlay */
background: url(images/see-through-pattern-background-2.png) center repeat;
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
opacity: 0.7;
z-index: -1;
}
@paulobunga
Copy link

Will this wok on a body tag.

@alexartcraft
Copy link

Thanks man, worked great for my FreeCodeCamp project. Cheers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment