Trying to Post Solid Images on a Transparent Mainbar

[BSweeney]

I am working on my very first blog, and unfortunately HTML and CSS is very new and confusing to me.

My current issue is with posting images. On my blog I have a semi-transparent mainbar and sidebar (with a solid background image), and of course whenever I post images they are transparent also. I have tried searching online for the fix to make my images solid, and although I have run across a few (including THIS one), I just can’t figure it all out.

I’m not sure what other information I should post. Here is my mainbar code:
#main-wrapper {
width: 470px;
float: left;
padding: 5px;
border:1px solid $bordercolor;
background-color:#000000;
filter:alpha(opacity=80); -moz-opacity:0.85; opacity:0.85; -khtml-opacity:0.85;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

It’s such a frustrating situation, but I’m open to any and ALL help — it will be greatly appreciated.

[luxurychair]

The easiest way to fix this is to make a small (like 5×5) semi-transparent black .png image and apply that as the background with the entire area having an opacity of 1.

That way you’ll be able to see through the background but not through the text or images posted on it.

[BSweeney]

Thank you luxurychair — I’m going to try that this evening. :)

[BSweeney]

Just to be clear, when you say background you’re referring to the mainbar, right? And not my actual blog background image?

[luxurychair]

Yeah, the background for the mainbar. It’s currently set to a solid #000000. Set it to a 5×5 image (png) of a black square with opacity set to 70% (or whatever, adjust it to your tastes) and remove the opacity settings via css.

[Author]

Posts