фоновое изображение растянуть и обрезать

Question

Пока мне удалось растянуть фоновое изображение:

XHTML:

<div id="background">
    <img src="images/background.jpg" alt="Background" />
</div>

CSS:

#background
{
    width: 100%;
    height: auto;
    position: fixed;
    left: 0px;
    top: 0px;
}

#background img
{
    width: 100%;
    height: 100%;
}

Это хорошо работает, за исключением того, что изображение отображается сверху, когда высота изображения превышает высоту окна. Это означает, что верхняя часть изображения всегда отображается, а нижняя часть обрезается. Я хочу изменить это так, чтобы изображение всегда отображалось из центра (чтобы обрезались как верх, так и низ изображения, и отображался центр изображения).

Answer 1

Вот хороший учебник по созданию идеального полноэкранного фонового изображения . Та же концепция может быть применена и к любому старому тегу.

Как правило, изображения, которые должны быть фоновыми, не должны появляться в самой разметке. Вы смешиваете презентацию с контентом.

Answer 2

Если наличие тега img не является абсолютной необходимостью, удалите его и добавьте следующие три строки в свой класс #background:

background-image:url(images/background.jpg);
background-position:center;
background-repeat:no-repeat;

В первой строке задается фон для DIV.Вторая строка всегда располагается по центру.Третья строка гарантирует, что фон не повторяется, что, как я и предполагал, вам нужно, глядя на вашу HTML-структуру.

Требуется более, чем рад, предложить дальнейшие действия.