put background image in center and repeat last pixel to left and right

Question

i want to put my background image in the center and repeat only the last left pixelcolumn to the left and the same for the right and the last pixelrow down. so that if you zoom out you see this

                 --------------   repeat last pixel of the right of the picture to the right  
                 |            |
                 |            | 
                 --------------      
                 ^ 
                 |
                 here repeat to the left the first pixels  to the left

and below the picture the lowest row of pixels repeat down.

i hope you understand what i mean...

minke

Answer 1

This pen illustrates how this is possible now with border-image, which had very poor support at the time this question was asked, but is supported on the latest version of all the major browsers: (IE11+, Firefox 15+, Chrome 16+, Safari 6+)

Basically, you use background-image to render the 'full' image, positioning it centered using background-position.

#container {
  height: 100vh;
  width: 100%;
  margin: 0 auto;
  padding: 0 20%;
  box-sizing: border-box;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/44521/light_minimalistic_soft_shading_gradient_background_1024x768_58884.jpg);
  background-size: 61% 100%;
  background-position: center 0;  
  background-repeat: no-repeat;     
}

Then, you can use border-image for the repeated edges. Note the use of border-image-slice to grab only 1px of the edges on the sides.

#container {
  border-width: 0 20% 0 20%;
  border-image-source: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/44521/light_minimalistic_soft_shading_gradient_background_1024x768_58884.jpg);
  border-image-slice: 2;
  border-image-width: 2 20%;
  border-image-repeat: stretch;
  border-image-outset: 2px;
}

Live example on CodePen