[Resolved] Opaque page/post background code w/o affecting text or image?

[Kris McGregor]

Hi, I LOVE THE THEME and ADD-ONS! Thanks for your hard work! I would like to modify the just post/page/sidebar background without affecting texts or images. I would like just a degree (say 60 percent) transparency so the image background can be seen. I’m not sure where to put in the code without it affecting everything in the content.

Can you please help me? Thanks.

[Tom]

Hi Kris, glad you’re enjoying GP! 🙂

The best way to do this is to use background images.

For example, create a 2×2 (pixel) image with your 60% transparency and save it as a PNG.

Now remove any background colors from your content/sidebar areas.

Then add the PNG image you created a background image for these areas.

That should do it!

Let me know 🙂

[Kris McGregor]

Dear Tom. Thank you so much for your reply. I appreciate the solution you offered, but my circumstances are such that I could really use an alternative approach.

What I would really like to have is a darker opaque “screen like” appearance which could be used to rest the text and images on over the image/video. I am trying to replicate a style that I have on another site that works really well for me. I will be using a full background for the site we are discussing that will change for many, many different categories, posts and pages. I have the functionality on the new site now to do that. Also I plan on having video in the background on occasion.

I suppose I need a code which would help divide the text and images from the content background. Then the page/post/sidebar background code to adjust opacity. And then I would need to know where to put it.

I apologize for being such a bother. I wish I had the knowledge to know how to make that happen without troubling you. Your theme is so fantastic, especially with the add-ons I purchased. I just wish I could accomplish this one adjustment, then all would be perfect.

I appreciate your patience and help in figuring this out.

Thanks

[Tom]

Do you possibly have a link to your other site that accomplishes this so I have a clearer understanding of what you’re trying to accomplish with GP?

Let me know 🙂

[Kris McGregor]

Thanks for the reply Tom. An example fo the site can be found at: http://www.discerninghearts.com/?p=13228

[Tom]

You can achieve that exact same look using the method I described in my previous post.

First, you would set a background image or video.

Then, remove any background colors set for the content and widgets.

At this point, all of your content will be sitting on top of your background image.

Now, add a 2×2 pixel PNG image with your desired opacity to the content and widgets, and make sure it’s set to repeat.

That will give you the exact look you’re looking for 🙂

[Author]

Posts