Home/ Questions/Q 8902961
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T01:44:52+00:00

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

  • 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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0