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

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

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

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

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

Заранее спасибо.

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

<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>

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

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

<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>

И у меня все работает нормально.

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

Дайте нам знать, что вы в итоге делаете.

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

Чтобы расширить ответ @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; 
}

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

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

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

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;
    }
}

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

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

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;

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

образ{

background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 3em 0 3em; 
margin: -1.5em -0.5em -0.5em -1em; 
  width: absolute;
  max-width: 100%; 

Просто сделайте div прямым потомком тела (например, с именем класса bg), охватывающим все остальные элементы тела, и добавьте это в файл CSS:

.bg {
    background-image: url('_images/home.jpg');//Put your appropriate image URL here
    background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}

Перейдите по этой ссылке: https://www.w3schools.com/css/css_rwd_images.asp Прокрутите вниз до той части, которая гласит:

2. Если для свойства background-size установлено значение «100% 100%», фоновое изображение будет растягиваться, чтобы покрыть всю область содержимого.

Там он показывает img_flowers.jpg, растягивающийся до размера экрана или браузера, независимо от того, как вы его изменяете.

Меня устраивает

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}