My best friend Gracie asked me a very interesting question.
How to make the content area in WordPress transparent?
CSS transparency is very complicated, at least for me. Using CSS to make the content area transparent got me no results.
I tried the syntaxes for alpha, opacity and “background: transparent;” but those didn’t really work – at least not on all 3 major browsers: Internet Explorer, Chrome and Firefox simultaneously. (IE is actually the most problematic one!)
What did work, is a simple trick: using a transparent PNG picture for the background.
In this example, the site belongs to IoHann. His WordPress site uses the thesis theme, and he has a big background image.
We applied the transparent image on the header, the content area and on the footer. The HTML framework is set to full-width.
The code is listed below, please feel to use and edit:
#content_area .page, #footer_area .page, #header_area .page {background:url(“http://www.shmellycat.com/wp-content/uploads/2011/08/TransparentBG.png”);}
And here is the outcome: the picture that is visible, is the site’s main background image.
To download the transparent image I used, right-click and Save-link-as the link below:
{ 3 comments… read them below or add one }
Thank you! I have been searching and searching for a solution to this and your is the only one that worked! Thank you for taking the time to post.
Awesome!! Where do I put in this code? Does the framework have to be Full Width in order for this to work?
THANK YOU!!!
hi, I’m sorry I’ve been kinda busy!
The framework does not have to be in full width in order to work, and you can place the code on any container that needs to be transparent (the code just need to be modified a little to match
the container/element name).