SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Creating transparent layout with background image

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    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.:

    Code:
    .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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •