CODEWITHSUNDEEP
htmlcssbackground-image
zbee
zbee

Reputation: 948

I'm trying to have top right border image with a background color

So, I have several position background images in place and a background color and the images have a transparent edge, and I'm wondering if I can eradicate the background color from where the images are transparent.

I currently get this Image.

And would like to get something like this Image.

P.S. Sorry for just posting images as links, but at the time of this posting I wasn't allowed to actually post images.

Web Page: desertednoir.uhostfull.com

Relevant Code:

#content {
    padding: 1.5%;
    float: left;
    width: 73%;
    text-align: center;
    z-index: 1;
    color: Silver;
    border: 1px solid black;
    background: url("/images/e_bl.png") no-repeat left bottom,
    url("/images/e_tr.png") no-repeat right top,
    url("/images/e_tc.png") no-repeat center top,
    url("/images/e_br.png") no-repeat right bottom,
    #3C3C3C;
}

<div id="content">Content Stuff</div>

Upvotes: 1

Views: 87

Answers (1)

KatieK
KatieK

Reputation: 13853

HTML and CSS alone are not sufficient to edit an image to add or remove transparent pixels. However, they also won't add color, unless you tell them to. Just make sure that you don't have a background-color specified on your element, and it will remain transparent.

I've put your example code into http://jsfiddle.net/XQumV/. As you can see, if you remove , #3C3C3C from the end of your background rule, then your element is transparent.

Because elements in HTML are inherently rectangular, their background-colors will always be rectangular too. Instead of using background-image to do get a complex background image, try using border-image. See https://developer.mozilla.org/en-US/docs/CSS/border-image for details.

Upvotes: 2

Related Questions