SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css3 border-image's transparent png issue

    I'm using border-image with a PNG image that has a transparent section. The issue is that the div has background-color set the black. When I apply border-radius, the transparent section of the pattern shows the black of the div and not the background of the element containing the div.

    How do I get border-radius to ignore the color of the div. Below is the code in question.

    HTML

    Code HTML4Strict:
    <header>
    		<div  class="outerColumn">
    			<div class="column clearfix">
    				<h1>Company</h1>
    				<nav>
    					<ul>
    						<li><a href="#">Home</a></li>
    						<li><a href="#">Portfolio</a></li>
    						<li><a href="#">My Work</a></li>
    						<li><a href="#">About me</a></li>
    						<li><a href="#">Elements</a></li>
    						<li><a href="#">Contact</a></li>
    					</ul>
    				</nav>
    			</div>
    		</div>
    	</header>


    CSS

    Code CSS:
    body > header{
    	position:fixed;
    	top:0;
    	left:0;
    	z-index:2;
     
    	border-bottom:10px solid #0e0e0e;
    	-moz-border-image: url(../images/header-background-pattern.gif) 0 0 10 0 repeat;
    	-webkit-border-image: url(../images/header-background-pattern.gif) 0 0 10 0 repeat;
    	border-image: url(../images/header-background-pattern.gif) 0 0 10 0 repeat;
    }
     
    header, footer{
    	width:100%; 
    	background-color:#0e0e0e;
    	clear:both;
    }

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have not set the border-width property, I think that should solve your problem.

  3. #3
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TommiChi View Post
    You have not set the border-width property, I think that should solve your problem.
    Please elaborate?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Do you have a live example it might be easier to see what you want ?

    You don't seem to be using border-radius in the above and your elements have the same background-colour so I'm a little confused. If you want to clip the background so that it's not under the border then use background-clip.

    Code:
    -moz-background-clip:padding;
    -webkit-background-clip:padding;
    -background-clip:padding;


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •