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 }