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

And at the corners what it would look? I don't think it's managable. Can you give as more details of what are you trying to do? What is the purpose of doing that? Does your div have fixed height? — Dan Ovidiu Boncut, Feb 26 '13 at 11:47

score 3 · Answer 1 · answered Sep 11 '14 at 21:06

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

it works, but my chrome browser is lagging out massively if I open this up on my larger monitor is this just a limitation of css3 implementations at the moment? — Hashbrown, Oct 25 '15 at 15:36

score 1 · Answer 2 · edited May 23 '17 at 10:27

1

Have a look at the link below.

Position a CSS background image x pixels from the right?

edited May 23 '17 at 10:27

Community

1
1

answered Feb 26 '13 at 11:08

pavan

470
3
11
25

score 1 · Answer 3 · edited Oct 28 '16 at 01:40

This is not the exact solution you are looking for, but it could have the same effect on SOME images you are looking for:

.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
}

score 1 · Answer 4 · answered Feb 14 '18 at 12:12

Take a 1px-wide slice of the image and save it. This is the code I used for a sticky footer with a 196px-wide left portion, and a repeating 1px-wide right section:

footer {
    background-image: url('../../images/footer-left.png'), url('../../images/footer-right.png');
    background-repeat: no-repeat, repeat-x;
    background-size: 196px 175px;
    bottom: 0;
    color: white;
    height: 175px;
    left: 0;
    margin-bottom: 0;
    padding-top: 75px;
    position: fixed;
    text-align: center;
    width: 100%;
}

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

4 Answers4

Live example on CodePen

Linked