why does twitter implement a full screen image like this

Question

There is a full screen image in the front page of twitter.In the source code,they do something like this:

HTML:

<div class="front-bg">
<img class="front-image" src="xxx.jpg">
</div>

CSS:

.front-bg {
position: fixed;
width: 200%;
height: 200%;
left: -50%;
}
.front-bg img {
margin: auto;
min-width: 50%;
min-height: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

Why do they set top/left property to the ".front-bg img"? And if I change something like this:

.front-bg {
position: fixed;
width: 100%;
height: 100%;
}
.front-bg img {
min-width: 100%;
min-height: 100%;
}

It works as well. Why do they set width 200% instead?

Answer 1

{ top: 0; left: 0; right: 0; bottom: 0; }

This part is not used on desktop at all as this image does not have position property set, perhaps it's used on different devices with additional media queries?

I'd say the reason behind 200%/200% and positioning margin has to do something with the preffered way for centering the image. With %100/%100 scenario image would be always left aligned to the left border of browser window on smaller screens. By applying

margin: 0 auto; min-width: 50%;

they make it as wide as browser window and always centered.