I’m trying to figure out how to create a transparent layout with a background image as the background.
The following website is exactly what I’m looking for. http://mattmahermusic.com/ Also, it might be a wordpress theme, so please let me know if you can find out what theme it is.
If you could kindly help me in any way by telling me the HTML & CSS techniques used, that would be awesome.
Yep, this is very easy to do. You have two easy options, one slightly more backwards compatible than the other. The one that works on older browsers too (and which is used on that site) is to have a background image that is semi-transparent. So, in Photoshop (or similar) you make, say, a black image, and then set it to something like 30% opacity and save it for the web as a .png with transparency. Place it as a bg image on the content area or whatever. (The site you linked to uses this image, which is semi-transparent: http://mattmahermusic.com/storage/contentbg.png )
The more modern way (although it only works in the more up to date browsers—which means all of them except IE8 and under) is to set a background color on the content area with rgba values. E.g.:
.content {background: rgba(0,0,0,0.2);}
That sets the background to black, but with only 20% opacity, so that anything behind it shows through nicely.
Hope that helps. 