0

I am trying to create this ribbon effect dynamically using an h1:

enter image description here

I have these two images:

enter image description here

enter image description here

and my goal is to stick these on each end of my h1 tag, use the display: inline; property to add dynamic width. Is there any "right way" to do this and make it work cross browser?

For my testing purposes, the ribbon ends are 40px tall, and 18px wide. I am not sure yet what I am going to do about the shadow, but if you guys can just help me figure out how to get this working, I can make it look nice. (hopefully)

For clarification purposes, here is the (non-working) css I have so far:

h1 {
display: inline;
height: 40px;
background-image: url(images/ribbon/left.png), url(images/ribbon/right.png);
background-position: left, right;
padding: 0 18x;
background-color: #ECECEC;
}

The css above causes the #ECECEC color to bleed behind the ends of the ribbon. Any ideas?

Update: If it helps, here is a screen shot of what my current css is bringing me. This is a little sensationalized to make the result easier to see. I have added a red background instead of the #ECECEC.

enter image description here

drewwyatt
  • 5,989
  • 15
  • 60
  • 106

1 Answers1

1

First try 

overflow: hidden

It could also be a browser issue: Border Radius = Background Bleed

EDIT: Have you thought about not using the images all together and just using pure css http://css-tricks.com/snippets/css/ribbon/

May not look like you wanted but messing around with the css would fix this.

Community
  • 1
  • 1
joshuahornby10
  • 4,222
  • 8
  • 36
  • 52
  • That doesn't look like it's working. The bleed looks to be coming from the background images just sitting on top of the background color (and having a transparent portion). I need them to sit outside the background color (or something similar) – drewwyatt Nov 27 '12 at 23:45
  • Had no idea this was even a thing! Thanks! – drewwyatt Nov 28 '12 at 00:26