Clever Geek Handbook

Create a ribbon effect using the border-image property

http://jsfiddle.net/94k1wuhu/

When I look at my violin, my problem should be obvious to you. I created a border image to create a ribbon effect (cool idea isn't it?), But apparently the background color sets the background for the border as well. Does anyone have an idea to solve this?

HTML:

<div id="main">
  <p>Without background-color:</p>
  <h1>Home</h1>
  <p>With background-color:</p><br /><br />
  <h1 id="bg">Home</h1>
</div>

CSS

body {
    background-color: #333;
}

#main {
    background-color: #efefef;
    width: 300px;
    height: 700px;
    padding: 30px 20px;
    margin: 0 auto;
}

h1 {
    margin-left: -40px;
    padding: 3px 10px 3px 20px;
    color: #fff;
    display: inline;
    letter-spacing: 1px;
    border: 20px solid transparent;
    border-image: url(http://altistest.square7.ch/templates/pscal/images/h1br.png) 20 20 20 20 stretch;
}

#bg {
    background-color: #72b743;
    margin-top: 20px;
}
+3


source to share


1 answer


In browsers that support it, you can add:

background-clip: padding-box;

This allows the background (color and / or image) to expand to the border, but not "below it", clipping it to the fill area. Possible values ​​(see the link below):



window borders

The background extends to the outer edge of the border (but below the border in z-order).

upholstery box

There is no background under the border (the background extends to the outer edge of the pad).

Contents of the box

The background is colored to the content area (clipped).

Literature:

+3


source






More articles:


All Articles