Grow your CSS skills. Land your dream job.

Trying to Post Solid Images on a Transparent Mainbar

  • # April 28, 2010 at 4:39 pm

    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.

    # April 28, 2010 at 6:12 pm

    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.

    # April 28, 2010 at 6:47 pm

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

    # April 29, 2010 at 1:30 pm

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

    # April 29, 2010 at 4:22 pm

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".