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;
}
@Nillansan
Copy link

Thank you! :D you just saved me a ton of head ache.

@tomicrow
Copy link

tomicrow commented Jun 7, 2014

Here is some CSS overlay techniques...

http://www.corelangs.com/css/box/overlay.html

Tom

@RazeInk
Copy link

RazeInk commented Aug 2, 2014

Hello, would you go over this with me in a little more detail as i'm getting so confused with what is going on.

@skashi
Copy link

skashi commented Oct 30, 2014

Worked perfectly, thank you!

@williamholdin
Copy link

Here you can see transparent image background, transparent border and transparent box.....

http://www.corelangs.com/css/box/transparent.html

William

@dissolvdgrl
Copy link

this is awesome, thanks!

however, i can't seem to figure out why it doesn't extend beyond the browser height. i can resize the browser window and it fits to that perfectly, but when i scroll it kinda 'sticks' to whatever your browser's height is. is it the absolute positioning? i'll tinker a bit with the site i'm using this technique on and try to figure it out :)

@abrarfahad
Copy link

Yes. this is awesome and you are also awesome , thanks @ollie Murphy.
It's worked for me :)

Copy link

ghost commented May 19, 2016

thanks, but is there a fast way to put a transparent color overlay to it ?

@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