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


89

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


Oczywiście możesz użyć JavaScript, aby zrobić to dynamicznie, ale byłoby to prawdopodobnie gorsze niż hacki CSS sugerowane przez link gabriel1836.
Jason Bunting

Aby zachować proporcje obrazu, użyj opcji „background-size: cover;” lub „background-size: include;”. Zbudowałem polyfill, który implementuje te wartości w IE8: github.com/louisremi/background-size-polyfill
Louis-Rémi

Odpowiedzi:


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

Działa to również jako tagi stylu w elementach html lub w plikach css.
Nathan

2
to najlepsze rozwiązanie wszech czasów.
AFD

1
Jaka jest różnica między ubezpieczeniem a 100% 100%?
Pacerier

4
100% 100% nie zachowuje proporcji oryginalnego obrazu. „pokrywa” skaluje obraz, zachowując jego wewnętrzny współczynnik kształtu (jeśli istnieje), do najmniejszego rozmiaru, tak aby zarówno jego szerokość, jak i wysokość mogły całkowicie pokryć obszar ustawiania tła. Możesz również użyć opcji „zawiera”, aby przeskalować obraz, zachowując jego wewnętrzny współczynnik proporcji (jeśli istnieje), do największego rozmiaru, tak aby jego szerokość i wysokość zmieściły się w obszarze pozycjonowania tła.
Mike737

"-webkit-background-size: okładka;" nie jest prawidłową właściwością CSS3.
VoidKing


8

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.


Dla tych, którzy NIE chcą zachować proporcji!
BillyNair

6

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


1
Widziałem tę technikę w akcji co najmniej dziesięć lat temu. Nie wyobrażam sobie, żeby teraz to nadal nie działało.
powiek

5

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

4

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

3

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

3

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

3
Potrzebujeszbackground-size: 100% 100%;
Sablefoste

Nie wiem, jakiej przeglądarki używasz, ale to, co powiedziałem, działa dla mnie w Firefoksie i Chrome.
Badar

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

0

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.


0

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

2
Witamy w SO! Aby napisać lepszą odpowiedź, dodaj uzasadnienie, dlaczego to działa i pokaż kod w akcji. Możesz również przeczytać o napisaniu dobrej odpowiedzi .
displacedtexan

0

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:

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


-1

Mi to pasuje

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.