Affixing image to outside of heading tag

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.

do you have to use a transparent png? why not just remake the image with the black background? — Pete, Jan 09 '13 at 12:07
Actually no, it doesn't have to be transparent.That will work, thanks. — Andrew Cassidy, Jan 09 '13 at 12:13
consider this answer http://stackoverflow.com/a/4056440/1135581 — Rahul, Jan 09 '13 at 12:26

score 2 · Accepted Answer · answered Jan 09 '13 at 12:24

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/

Affixing image to outside of heading tag

1 Answers1