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

---

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

---

Have a look at the link below.

Position a CSS background image x pixels from the right?

---

这不是您正在寻找的确切解决方案，但它可能对您正在寻找的某些图像具有相同的效果：

.bg {
    background:url(../images/image.jpg),url(../images/image.jpg);
    background-repeat: no-repeat, repeat;
    background-position: 0px 0px;
    background-position-x: center;
    background-size: 1914px 100% , 1px 100%; // 1914px is the width of the image
}

链接地址: http://www.djcxy.com/p/69622.html

上一篇: 键入表达式分析器

下一篇: 将背景图像放在中心并将最后一个像素重复到左侧和右侧