Created
March 26, 2013 04:59
-
-
Save omurphy27/5243251 to your computer and use it in GitHub Desktop.
CSS Transparent Background Image Pattern Overlay
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*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; | |
} |
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!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here you can see transparent image background, transparent border and transparent box.....
http://www.corelangs.com/css/box/transparent.html
William