Как растянуть фоновое изображение, чтобы покрыть весь элемент HTML?

Я пытаюсь получить фоновое изображение элемента HTML (body, div и т.д.), чтобы растянуть всю его ширину и высоту.

Не повезло. Возможно ли это, или мне нужно сделать это каким-то другим способом, кроме того, что это фоновое изображение?

Мой текущий css:

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

Спасибо заранее.

Изменить: я не заинтересован в поддержании CSS в предложении Габриэля, поэтому вместо этого меняю макет страницы. Но это похоже на лучший ответ, поэтому я отмечаю его как таковой.

Ответ 1

<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

Ответ 2

Используйте свойство background-size: http://www.w3.org/TR/css3-background/#the-background-size

Ответ 3

Короче вы можете попробовать это....

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

Где я использовал несколько css и js...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

И он отлично работает для меня.

Ответ 4

Не уверен, что возможно растянуть фоновое изображение. Если вы обнаружите, что это невозможно или ненадежно во всех целевых браузерах, вы можете попробовать использовать растянутый тег img с индексом z-index ниже, а положение установлено в абсолютное, чтобы поверх него отображалось другое содержимое.

Сообщите нам, что вы делаете.

Изменить: то, что я предложил, в основном, что в gabriel ссылку. Поэтому попробуйте:)

Ответ 5

Чтобы расширить ответ на @PhiLho, вы можете центрировать очень большое изображение (или изображение любого размера) на странице с помощью

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Или вы можете использовать меньшее изображение с фоновым цветом, соответствующим фону изображения (если это сплошной цвет). Это может или не подходит для ваших целей.

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Ответ 6

Если у вас большое ландшафтное изображение, этот пример меняет размер фона в портретном режиме, поэтому он отображается сверху, оставляя пустой снизу:

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}

Ответ 7

Следующий код, который я использую в основном для достижения заданного эффекта:

body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}

Ответ 8

Если вам нужно растянуть фоновое изображение при изменении размера экрана, и вам не нужна совместимость со старыми версиями браузера, это сделает работу:

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

Ответ 9

background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Ответ 10

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