How can I make my image-border appear outside of background-color [duplicate]

Question

This question already has answers here:

How to hide the background underneath the border (4 answers)

Closed 7 years ago.

http://jsfiddle.net/efDuN/

I am trying to create a footer with a top image border, and a background color. However, the image has transparency in it that shows the background color beyond the edges. The height of the footer is in Ems whereas the height of the border-image is 46 pixels.

How can I get the border to appear outside of the background color, while maintaining its flexibility (Ems)?

<div id="footer">

<br>
<p>Copyright (c) 2008</p>
<br>

body {
background-color: black;
}

#footer {
 border-style: solid; border-width: 46px 0px 0px; 
-moz-border-image: url("http://i272.photobucket.com/albums/jj180/niahcx/web/smalllace_zpscffc6b3e.png") 46 1 0 0 repeat; 
-webkit-border-image: url("http://i272.photobucket.com/albums/jj180/niahcx/web/smalllace_zpscffc6b3e.png") 46 1 0 0 repeat; 
-o-border-image: url("http://i272.photobucket.com/albums/jj180/niahcx/web/smalllace_zpscffc6b3e.png") 46 1 0 0 repeat; 
border-image: url("http://i272.photobucket.com/albums/jj180/niahcx/web/smalllace_zpscffc6b3e.png") 46 1 0 0 fill repeat;

background-color: pink;
background-repeat: repeat;
text-align: center;
color: #ffffff;
height: 6em; 
width: 100%;
}

Answer 1

Duplicate of How to hide the background underneath the border

Use background-clip: padding-box to keep the background color from bleeding into your border image.

http://jsfiddle.net/efDuN/13/

Answer 2

You can add another div to the footer that will contain all footer content.

<div id="footer">
    <div id="footer_content">
        <br>
        <p>Copyright (c) 2008</p>
        <br>
    </div>
</div><!--footer-->

Keep border on a footer and make footer_content div have pink background.

http://jsfiddle.net/efDuN/11/

Answer 3

This is a simple solution which can also be easily edited.

All, you need to do is modify your HTML as such:

<div id="footer">
    <div id="footerTop"></div>
    <div id="footerBottom">
        <br/>
        <p>Copyright (c) 2008</p>
        <br/>
    </div>
</div>

and add the following CSS :

#footerTop {
    width: 100%;
    /*background-color:Orange;*/
    /*border-top-image*/
    border-style: solid;
    border-width: 46px 0px 0px;
    -moz-border-image: url("http://i272.photobucket.com/albums/jj180/niahcx/web/smalllace_zpscffc6b3e.png") 46 1 0 0 repeat;
    -webkit-border-image: url("http://i272.photobucket.com/albums/jj180/niahcx/web/smalllace_zpscffc6b3e.png") 46 1 0 0 repeat;
    -o-border-image: url("http://i272.photobucket.com/albums/jj180/niahcx/web/smalllace_zpscffc6b3e.png") 46 1 0 0 repeat;
    border-image: url("http://i272.photobucket.com/albums/jj180/niahcx/web/smalllace_zpscffc6b3e.png") 46 1 0 0 fill repeat;
}

#footerBottom {
    background-color: pink;
    background-repeat: repeat;
    text-align: center;
    color: #ffffff;
    height: 6em;
    width: 100%;
}

You can take a look here: http://jsfiddle.net/dLUmm/

Hope this helps!!