Iter Ator Iter Ator - 4 months ago 12
CSS Question

CSS background position 50% 50% does not work

There is an element, which width and height is not known. I would like to create a background in CSS, which is repeated, and starts at the center of the element. It should look like this:

My code is:

body {
background: url('http://www.lighthouse3d.com/wp-content/uploads/2011/03/crate.jpg') 50% 50% / 100% 100% repeat;
}


https://jsfiddle.net/5omLL24d/

Answer
body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    background: url('http://www.lighthouse3d.com/wp-content/uploads/2011/03/crate.jpg');
    background-repeat: repeat;
    background-position: center center;
}

JSFiddle

UPDATED (corners in center, webkit) Thanks, CBroe and Lovelock

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    background: url('http://www.lighthouse3d.com/wp-content/uploads/2011/03/crate.jpg');
    background-repeat: repeat;
    background-position: -webkit-calc(50% + 128px) -webkit-calc(50% + 128px); // 128 pixels is half of the background image
    background-position: calc(50% + 128px) calc(50% + 128px); // 128 pixels is half of the background image
}

JSFiddle