64357

CSS border-image: Only the corners filled with the specified background-image. Why?

I would like to use the CSS property "border-image": https://developer.mozilla.org/de/docs/Web/CSS/border-image

But for some reason it fills only the four corners of the element:

<img src=https://www.e-learn.cn/content/wangluowenzhang/"https://i.stack.imgur.com/JMhT6.png" alt="What I see on my computer">

My code:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.wrap {
  width: 400px;
  height: 300px;
  margin: 50px auto;
  position: relative;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightGray;
  border: 50px solid transparent;
  border-image: url(http://lorempixel.com/50/50/) 50 50 50 50 stretch stretch;
}
<div class="wrap">
  <div class="item"></div>
</div>


What do I wrong?

I would expect the little image to be <strong>repeated</strong> as well vertically as horizontally.

So that the grey box is enclosed with the image pattern.

Any help very much appreciated.

Answer1:

No, it won't because your image is a 50x50 image and the border-image-slice is set as 50 too.

The way border-image-slice works is that the UA will split the image into 9 pieces based on offsets indicated in the slice. In your case, once you slice the image by 50px, there is nothing left in middle to set for the areas marked as 5, 6, 7 and 8 in the below image (Image is copied from MDN).

<img src=https://www.e-learn.cn/content/wangluowenzhang/"https://i.stack.imgur.com/Bxe3z.png" alt="enter image description here">

From the W3C Spec on border-image-slice:

The regions given by the ‘border-image-slice’ values may overlap. However if the <strong>sum of the right and left widths is equal to or greater than the width of the image</strong>, the <strong>images</strong> for the top and bottom edge and <strong>the middle part are empty, which has the same effect as if a nonempty transparent image had been specified</strong> for those parts. Analogously for the top and bottom values.

You'd have to set the border-image-slice as something lesser than 25 for the areas in the middle to get covered with the image.

<strong>Note:</strong> Though the spec says <strong>top and bottom edge</strong> image are also considered as empty, I am not sure why browsers show the image on all four corners. That may be down to browser implementation. Plus browsers seem to work fine even when we specify the border-image-slice as 25. It is slightly contradicting with the spec but you atleast get the reason :)

Answer2:

Not sure what works, but using an image of larger size sort of fixed it.

Please note that usually the images that are used for border-image are images with graphics at their edges. It's not that entire image is repeated along the edges. It's sort of all four corners of the image are aligned to the corners of our div and then rest of the image is adjusted according to specified properties.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.wrap {
  width: 400px;
  height: 300px;
  margin: 50px auto;
  position: relative;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightGray;
  border: 50px solid;
  border-image: url(http://lorempixel.com/150/150/) 25;
}
<div class="wrap">
  <div class="item"></div>
</div>


Answer3:

Not sure if this is what you where looking for. You need to add <strong>box-sizing:border-box;</strong> to your <strong>.item</strong> class.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.wrap {
  width: 400px;
  height: 300px;
  margin: 50px auto;
  position: relative;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightGray;
  border: 50px solid transparent;
  border-image: url(http://lorempixel.com/50/50/) 50 50 50 50 stretch stretch;
box-sizing:border-box;
}
<div class="wrap">
  <div class="item"></div>
</div>


Hope this helps :)

Recommend

  • Anybody have any idea how the divs are emitted in pinterest.com?
  • Windows batch string manipulation in loop
  • removing the default blue color on focus
  • Creating a layer of gradient within an SVG path dynamically
  • Sum values in array of hash if they have the same value
  • CSS how to fix an element to scroll horizontally with the page but not vertically?
  • Ionic Slide Up Slide Down Animation for only one view in sidebar
  • How to repeat sections of a SQL query across UNIONs? (DRY in SQL)
  • How to add closing tag for canvas in three js rendered Canvas?
  • Cut the background to expose the layer below
  • XSLT foreach repeating nodes to flat
  • AndEngine Applying Transparancy to AndEngine View
  • Eloquent paginate function in Slim 3 project using twig
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Meteor: Do Something On Email Verification Confirmation
  • Google Custom Search with transparent background
  • FileReader+canvas image loading problem
  • CSS Linear-gradient formatting issue accross different browsers
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Where to put my custom functions in Wordpress?
  • jquery mobile loadPage not working
  • RestKit - RKRequestDelegate does not exist
  • Circular dependency while pushing http interceptor
  • Cannot Parse HTML Data Using Android / JSOUP
  • AngularJs get employee from factory
  • WPF Applying a trigger on binding failure
  • How to set the response of a form post action to a iframe source?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Java static initializers and reflection
  • Change div Background jquery
  • Bitwise OR returns boolean when one of operands is nil
  • unknown Exception android
  • MATLAB: Piecewise function in curve fitting toolbox using fittype
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?