border-image внутри элемента (вставка)

Question

У меня есть файл png (1603px x 75px), который я хотел бы использовать в качестве рамки для раздела. Но я бы хотел, чтобы он появился внутри (вставка), а не снаружи. Но я не могу понять, как сделать пограничное изображение внутрь (вставки) именно высоты изображения, не искажая вертикальный размер изображения.

HTML:

<section class="intro viewportheight_min" id="intro"> 

CSS:

body, html, .container, section { 
    height: 100%; 
} 
/*.container{margin:0 auto;}*/ 
section { 
    width:100%; 
    text-align:center; 
} 
section.intro { 
/* border-color:#06b4c8;*/ 
/* border-style:solid;*/ 
/* border-width:0 0 75px 0;*/ 
/* -moz-box-sizing: border-box;*/ 
    padding-top: 1%; 
    border-style: solid; 
    border-width: 0px 0px 75px 0px; 
    -moz-border-image: url(../img/vague.png) 0 0 75 stretch; 
    -webkit-border-image: url(../img/vague.png) 0 0 75 stretch; 
    -o-border-image: url(../img/vague.png) 0 0 75 stretch; 
    border-image: url(../img/vague.png) 0 0 70 fill stretch; 
} 

Answer 1

Попробуйте добавить box-sizing: border-box; свойство section.intro правило:

section.intro { 
    ... 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

http://jsfiddle.net/VL5Gw/