I cant figure out why the background image with no repeating starts from left edge of viewport, and not from left edge of the body element as it expected.
Take a look here
http://jsfiddle.net/pjLs594y/3/
<body>
<h1>Акварели зимнего дворца</h1>
<div class="test">Художник срисовал интерьеры по заказу жильцов.</div>
</body>
body {
background:url('http://artpoisk.info/files/images/9294.jpg');
background-repeat:no-repeat;
background-position:top left;
max-width:400px;
outline:1px solid red;
margin:0 auto;
}
div.test {
background:url('http://artpoisk.info/files/images/9294.jpg');
background-repeat:no-repeat;
background-position:top left;
width:200px;
outline:1px solid green;
}
There is DIV with the back image which starts from top left sides of the element as defined.
