Background color is leaking into transparent color

Question

I have managed to get the background-border transparency working perfectly but now I can't get the content to appear white by any means without it overlapping into the border image.

Here is what I have: http://gigadra.in/

What I need is this but where the text is (the content) I need the background to be white

I have tried: -Setting background color (simply doesn't work as it sets the border color too.) -using a repeating bg image (the transparency is still there but the image loads partly over the border) -using span to make the text background white (this would work but it only covers around the exact area of the text leaving some of the background transparent and come of it white.

here is my code:

.blog {
border-width: 27px;
-moz-border-image: url(divborder.png) 27 stretch;
-webkit-border-image: url(divborder.png) 27 stretch;
-o-border-image: url(divborder.png) 27 stretch;
border-image: url(divborder.png) 27 stretch;
font-family: pokemon;
font-size: 9px;
padding: 0px;
margin: 20px;
border-color: rgba(128,128,128,0.3);

}

oddly enough it loads fine in Dreamweaver,

thanks again guys!

Answer 1

.blog {
    border-width: 27px;
    -moz-border-image: url(divborder.png) 27 stretch;
    -webkit-border-image: url(divborder.png) 27 stretch;
    -o-border-image: url(divborder.png) 27 stretch;
    /* border-image: url(divborder.png) 27 stretch;  Remove this line */
    font-family: pokemon;
    font-size: 9px;
    padding: 0px;
    margin: 20px;
    border-color: rgba(128,128,128,0.3);
}

Its a dirty fix but it works

Answer 2

I think you just need to put your post content into div tag with some class (post-content for example) and set background color for it.

Here's the fiddle: http://jsfiddle.net/qgg9j/ (check out the last post)

Answer 3

HTML

<div class="blog">
    <div class="content_wrapper">
        <h1>text</h1>    
    </div>    
</div>

CSS

.content_wrapper{
    background: #fff;
    padding: 1px;
}