Як розтягнути фонове зображення, щоб охопити весь елемент 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. Мати зображення, яке охоплює всю сторінку позаду всіх інших компонентів - це, мабуть, найкращий вибір (схоже, це рішення, наведене вище). У будь-якому випадку, швидше за все, це все одно буде виглядати жахливо. Я хотів би спробувати або зображення, достатньо велике, щоб охопити більшість роздільних здатностей екрана (скажімо, до 1600x1200, над ним менше), обмежити ширину сторінки або просто використати зображення, яке виглядає як плитка.

зображення {

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, щоб бути прямим дочірнім елементом body (з назвою класу 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. Якщо для властивості розміру фону встановлено значення "100% 100%", фонове зображення розтягнеться, щоб охопити всю область вмісту

Там він показує "img_flowers.jpg", що тягнеться до розміру екрана або браузера, незалежно від того, як ви його змінюєте.

Це працює для мене

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