Jak rozciągnąć obraz tła, aby zakrył cały element HTML?

Próbuję uzyskać obraz tła elementu HTML (body, div itp.), Aby rozciągnąć całą jego szerokość i wysokość.

Nie mam szczęścia. Czy jest to w ogóle możliwe, czy też muszę to zrobić w inny sposób niż to, że jest to obraz tła?

Mój obecny css to:

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

Z góry dziękuję.

Edycja: nie jestem zadowolony z utrzymywania CSS w sugestii Gabriela, więc zamiast tego zmieniam układ strony. Ale to wydaje się być najlepszą odpowiedzią, więc zaznaczam to jako taką.

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

Użyj background-sizewłaściwości: http://www.w3.org/TR/css3-background/#the-background-size

Krótko mówiąc, możesz spróbować tego ....

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

Gdzie użyłem kilku css i 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>

I dla mnie działa dobrze.

Nie jestem pewien, czy rozciągnięcie obrazu tła jest możliwe. Jeśli okaże się, że jest to niemożliwe lub niewiarygodne we wszystkich przeglądarkach docelowych, możesz spróbować użyć rozciągniętego tagu img z indeksem z ustawionym niżej i pozycją ustawioną na wartość bezwzględną, tak aby inne treści pojawiały się nad nim.

Daj nam znać, co ostatecznie robisz.

Edycja: To, co zasugerowałem, jest w zasadzie tym, co jest w linku Gabriela. Więc spróbuj tego :)

Aby rozwinąć odpowiedź @PhiLho, możesz wyśrodkować bardzo duży obraz (lub obraz o dowolnym rozmiarze) na stronie za pomocą:

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

Możesz też użyć mniejszego obrazu z kolorem tła pasującym do tła obrazu (jeśli jest to jednolity kolor). Może to odpowiadać Twoim celom lub nie.

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

Jeśli potrzebujesz rozciągnąć obraz tła podczas zmiany rozmiaru ekranu i nie potrzebujesz zgodności ze starszymi wersjami przeglądarek, to zadziała:

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

Jeśli masz duży obraz poziomy, ten przykład tutaj zmienia rozmiar tła w trybie pionowym, tak aby było wyświetlane na górze, pozostawiając puste na dole:

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

Poniższy kod używam głównie do osiągnięcia żądanego efektu:

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;

Nie możesz w czystym CSS. Obraz obejmujący całą stronę za wszystkimi innymi komponentami jest prawdopodobnie najlepszym rozwiązaniem (wygląda na to, że jest to rozwiązanie podane powyżej). W każdym razie są szanse, że i tak będzie wyglądać okropnie. Chciałbym spróbować albo obrazu wystarczająco dużego, aby pokryć większość rozdzielczości ekranu (powiedzmy do 1600x1200, powyżej jest mniej), aby ograniczyć szerokość strony, albo po prostu użyć obrazu tego kafelka.

wizerunek{

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

Po prostu utwórz element div jako bezpośredni element potomny body (na przykład z nazwą klasy bg), obejmujący wszystkie inne elementy w treści, i dodaj to do pliku 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
}

Skorzystaj z tego linku: https://www.w3schools.com/css/css_rwd_images.asp Przewiń w dół do części, która mówi:

2. Jeśli właściwość background-size jest ustawiona na „100% 100%”, obraz tła zostanie rozciągnięty, aby pokryć cały obszar zawartości

Tam pokazuje „img_flowers.jpg” rozciągający się do rozmiaru ekranu lub przeglądarki, niezależnie od tego, jak zmieniasz rozmiar.

Mi to pasuje

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