Question

I’m trying to achieve the following effect for my headings:
https://i.stack.imgur.com/mIx7q.jpg

So that the background is red, then the right hand side image is attached with rounded edges and a transparent background.

Currently, the red background is filling the whole area, so that the rounded image on the right doesn’t have a transparent background, the corners are red.

This is the CSS that I currently have:

.tabbed-heading{
    background-color: #ef4857;
    padding: 8px 0px 8px 10px;
    background-image: url('images/headertabright.png');
    background-position: right;
    background-repeat: no-repeat;
    color: #fff;
    max-width: 60%;
}

–

<h4 class="tabbed-heading">Lineup</h4>

Any help would be greatly appreciated, thanks.

Answer 1

Not sure if this will work for you as your heading looks to be centered but this is a workaround to use the transparent png

HTML

<h4 class="tabbed-heading"><span>Lineup</span></h4>

CSS

h4 {padding:0 0 0 15px; margin-right:15px; background-color:#ef4857}
h4 span {display:block; margin-right:-15px; background:url(http://i.imgur.com/ozgAU.png) right center no-repeat; padding:7px 0;}

If you want to hide you text and just use the image as the title add text-indent:-9999px

Working example:

http://jsfiddle.net/YKrf4/1/