Jump to content


Photo
- - - - -

Div Background Transparency


  • Please log in to reply
5 replies to this topic

#1 mikec415

mikec415

    Member

  • Members
  • PipPip
  • 24 posts

Posted 28 June 2011 - 05:17 PM

Hey, How do I make only the background of a div transparent and not the content (i.e. video and images). Here is the domain of my site:

Please Login or Register to see this Hidden Content

I want the centered white square to be transparent and everything within it to remain solid. This is not a pagelines theme but I am a pagelines customer for my other site. Any help with this change would be greatly appreciated. Thanks. Mike

#2 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 28 June 2011 - 09:18 PM

use a transparent png image as the background and not a color.

#3 mikec415

mikec415

    Member

  • Members
  • PipPip
  • 24 posts

Posted 28 June 2011 - 11:07 PM

Adam, Thanks for your help. How do I create a png image of a semi-transparent white block without photoshop? Mike

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 29 June 2011 - 02:39 AM

Do you have any other image programs or access to any?

#5 mikec415

mikec415

    Member

  • Members
  • PipPip
  • 24 posts

Posted 29 June 2011 - 05:38 PM

Thanks guys. I had someone make an image for me on photoshop. Works great.

#6 srusnak

srusnak

    Newbie

  • Members
  • Pip
  • 9 posts

Posted 29 June 2011 - 09:36 PM

For future reference, you can make a small background image in Photoshop (ie: paint it black, toggle to the desired transparency in the layers option for the black layer) and save it as .png. This will retain the opacity and you can set that as the background for the div. I am not sure about other image programs, you can also look up free transparent backgrounds that are already saved as .png files. As another note, you cannot use the opacity css code because it will pass down to anything inside the div, this is why your media went transparent too. The above solution is the best bet, this will also ensure that it works in most browsers.