CSS Transparent Background Image Pattern Overlay

transparent background image pattern overlay.css

/*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;
	}

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

Here is some CSS overlay techniques...

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

Tom

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

Worked perfectly, thank you!

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

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

William

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 :)

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

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

Will this wok on a body tag.

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