Rozciągnij i skaluj obraz CSS w tle - tylko za pomocą CSS

853

Chcę, aby mój obraz tła był rozciągany i skalowany w zależności od rozmiaru rzutni przeglądarki.

Widziałem kilka pytań dotyczących przepełnienia stosu, które wykonują zadanie, na przykład Rozciągnij i skaluj tło CSS . Działa dobrze, ale chcę umieścić obraz za pomocą background, a nie z imgtagiem.

W tym jednym imgumieszczany jest tag, a następnie za pomocą CSS hołd dla imgtagu.

width:100%; height:100%;

Działa, ale to pytanie jest nieco stare i stwierdza, że ​​w CSS 3 zmiana rozmiaru obrazu tła będzie działać całkiem dobrze. Próbowałem tego przykładu jako pierwszego , ale mi się nie udało.

Czy istnieje dobry sposób na zrobienie tego z background-imagedeklaracją?

css  background 
— Fábio Antunes
źródło
113
rozmiar tła: 100% 100%;
— Andreas L.,
5
Może to demo może być pomocne: w3schools.com/cssref/…
— Davide
1
— Alex Angas
@AlexAngas Czy wiek pytania nie powinien być czynnikiem? To pytanie zostało zadane 6 lat temu, a pytanie, na które zwróciłeś uwagę, zostało zadane 4 lata temu.
— Fábio Antunes
@ FábioAntunes IMHO nie chcielibyśmy zamykać pytania z najlepszymi odpowiedziami, zamiast zachęcać duplikaty do linkowania do niego. Jestem pewien, że omawiano by to na Meta, ale nie mogę tego teraz znaleźć ...
— Alex Angas

Odpowiedzi:

1047

CSS3 ma ładny mały atrybut o nazwie background-size:cover.

Powoduje to skalowanie obrazu, dzięki czemu obszar tła jest całkowicie zakryty przez obraz tła, przy zachowaniu współczynnika kształtu. Cały obszar zostanie objęty. Jednak część obrazu może nie być widoczna, jeśli szerokość / wysokość obrazu o zmienionym rozmiarze jest zbyt duża.

— Vashishtha Jogi
źródło
11
Cover przycina obraz, jeśli proporcje nie pasują, więc nie jest to dobre ogólne rozwiązanie.
— mahemoff,
1
jeśli chcesz, aby działał w przeglądarkach IE - github.com/louisremi/background-size-polyfill
— Wreeecks
4
Wygląda na to, że nie działa w przeglądarce Firefox. Jednak background-size: 100vw 100vh;sztuczka ładnie się sprawdza.
— Yannick Mauray
5
@YannickMauray spróbuj: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
— Amit Kumar Khare
2
Jeśli chcesz tego, ale tylko dla osi poziomej, użyj tego: background-size: 100% auto; stackoverflow.com/questions/41025630/…
— antoineMoPa
470

Możesz użyć właściwości CSS3, aby zrobić to całkiem nieźle. Zmienia rozmiar na współczynnik, więc nie zniekształca obrazu (chociaż przeskalowuje małe obrazy). Pamiętaj, że nie jest jeszcze zaimplementowany we wszystkich przeglądarkach.

background-size: 100%;
— Matt Burgess
źródło
19
@nXqd To prawie cały kod! Utwórz kontener ze znakiem background-imagei dołącz powyższą właściwość. Jak wspomniano, obsługa przeglądarki nie jest jeszcze dobra i istnieją jej specyficzne wersje, tj. -webkit-background-sizeitp. Zobacz moduł W3C CSS3: rozmiar tła i css3.info: rozmiar tła
— MrWhite
15
Aby zachować proporcje obrazu, należy użyć „background-size: cover;” lub „rozmiar-tła: zawierają;”. Zbudowałem polifill, który implementuje te wartości w IE8: github.com/louisremi/background-size-polyfill
— Louis-Rémi
4
Wskazane jest również dodanie, autoaby zachować proporcje.
— Chibueze Opata,
186

Używając kodu , o którym wspomniałem ...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

Daje to pożądany efekt: przewija się tylko treść, a nie tło.

Obraz tła zmienia się w rzutnię przeglądarki dla dowolnego rozmiaru ekranu. Gdy treść nie pasuje do okna przeglądarki, a użytkownik musi przewinąć stronę, obraz tła pozostaje nieruchomy w oknie podczas przewijania zawartości.

Z CSS 3 wydaje się, że byłoby to o wiele łatwiejsze.

— Fábio Antunes
źródło
12
Ale to nie jest tło. Możesz to zrobić tylko dla bloku, ale nie elementu wbudowanego, takiego jak input [type = text]. A może się mylę?
— deerchao,
11
nie ma potrzeby używania klasy = "stretch", wystarczy użyć #background img {} jako identyfikatora w css
— BerggreenDK
indeks Z: -1; utrzymuje obraz w tle. Jeśli chcesz pokazać swój obraz na pierwszym planie, możesz zwiększyć wartość indeksu Z lub usunąć ten indeks.
— gokhanakkurt
Mam problem z IE8. Obraz tła DIV rozciąga się pełny, ale w IE8 obrazy wychodzą poza DIV, dlatego nie są w stanie zobaczyć pełnego obrazu. Zostaje przycięty. Oto moje pytanie: stackoverflow.com/questions/22331179/…
— Si8
1
Oczywistym błędem, jaki popełniają ludzie, jest umieszczenie obrazu tła w css (tj. Przez background : url("example.png");), a następnie użycie atrybutu css background-size:100%;pod nim, miejmy nadzieję, że przeskalujemy obraz do szerokości ekranu. To nie zadziała, prawda? Jeśli chcesz umieścić obraz tła dla ciała, atrybut tagu obrazu powinien zostać dodany do znacznika body jak <body background="example.png">. Następnie użyj css, background-size:100%;aby go skalować.
— sjsam
166

CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}
— Josh Crozier
źródło
Jednak to nie działa w IE8. Tworzy margines na górze i na dole okna.
— erdomester
Na Androidzie działało, gdy używasz html, body {...}zamiast body {...}.
— Edward,
53 
background-size: 100% 100%;

rozciąga tło, aby wypełnić cały element na obu osiach.

— yeahdixon
źródło
40

Następująca część CSS powinna rozciągnąć obraz we wszystkich przeglądarkach.

Robię to dynamicznie dla każdej strony. Dlatego używam PHP do generowania własnego tagu HTML dla każdej strony. Wszystkie zdjęcia znajdują się w folderze „image” i kończą się na „Bg.jpg”.

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

Jeśli masz tylko jeden obraz tła dla wszystkich stron, możesz usunąć $piczmienną, usunąć ukośniki odwrotne, dostosować ścieżki i umieścić ten kod w pliku CSS.

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

Zostało to przetestowane w Internet Explorerze 9, Chrome 21 i Firefox 14.

— Thorsten Niehues
źródło
2
Twój przykład nie działa w sensie kompatybilności wstecznej, ponieważ po prostu zapomniałeś o wiodących prefiksach „-” dostawców. To musi być -webkit-background-size, -moz-background-sizei tak dalej. Zobacz developer.mozilla.org/en-US/docs/CSS/... Albo idziesz za tym to dalekowzroczny w nieruchomości skrótowym jakbackground: url(img/bg-home.jpg) no-repeat center center / cover fixed;
— Volker E.
To było jedyne rozwiązanie, które działałoby dla mnie na IE9. Dzięki.
— robnick
17

Możesz faktycznie osiągnąć taki sam efekt jak obraz tła za pomocą znacznika img. Musisz tylko ustawić jego indeks Z na niższy niż wszystko inne, ustawić pozycję: bezwzględną i użyć przezroczystego tła dla każdego pola na pierwszym planie.

— Kim Stebel
źródło
To, co widziałem w innych SO pytaniach i działa, ale od czasu pojawienia się CSS3, pomyślałem, że teraz jest lepszy sposób na to.
— Fábio Antunes,
3
Biorąc pod uwagę zmiany w korzystaniu z przeglądarki, możesz być w stanie korzystać z nich komercyjnie w zaledwie ... 10 lat?
— Kim Stebel,
Będąc CSS3, nie ma nic złego w korzystaniu z właściwości widocznej w najnowszych przeglądarkach i zapewnianiu minimalnego standardu nieobsługiwanym przeglądarkom. Tutaj, na przykład, możesz użyć nudnego, ale akceptowalnego, kafelkowego tła dla <IE8 i uroczego zdjęcia dla Firefox / Chrome / Safari / Opera. Ponadto istnieje wiele wypełniaczy do replikacji funkcjonalności CSS3 w starszych przeglądarkach z JavaScript. Innymi słowy, nie trzeba czekać, aż każda przeglądarka będzie obsługiwać CSS3, aby z niego korzystać.
— Dan Blows
Właśnie znalazłem ten inny post, który odwołuje się do korzystania z zastrzeżonego MS AlphaImageLoader: stackoverflow.com/questions/2991623/…
— uglymunky
17

Użyj tego CSS:

background: url('img.png') no-repeat; 
background-size: 100%;
— RSH1
źródło
15

Wyjaśnia to sztuczki CSS: Idealny obraz w tle całej strony

Demo: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

Kod:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
— Aamer Shahzad
źródło
w oparciu o powyższą odpowiedź, widziałem, że poprawka załącznika do tła nie działa na urządzeniach mobilnych i Microsoft Edge. Idealne rozwiązanie, aby rozciągnąć tło i naprawić na wszystkich urządzeniach i przeglądarkach Polecam jquery-backstretch.com
— Aamer Shahzad
15

Możesz dodać tę klasę do pliku CSS.

.stretch {
    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;
}

Działa w:

  • Safari 3 lub nowsza
  • Chrome Cokolwiek lub później
  • Internet Explorer 9 lub nowszy
  • Opera 10 lub nowsza (obsługiwana Opera 9.5 background-size, ale nie słowa kluczowe)
  • Firefox 3.6 lub nowszy (Firefox 4 obsługuje wersję z prefiksem innej firmy)
— Arunraj S
źródło
Jest to działająca odpowiedź „rozciągnij, aby dopasować”. Uwaga: współczynnik kształtu się zmieni.
— devdrc
10

Aby odpowiednio skalować obrazy w oparciu o rozmiar pojemnika, użyj następujących opcji:

background-size: contain;
background-repeat: no-repeat;
— justinpees
źródło
9

Używam tego i działa ze wszystkimi przeglądarkami:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>
— Mahdi Jokar
źródło
9

Dzięki!

Ale to nie działa dla Google Chrome i Safari przeglądarek (rozciąganie pracowali, ale wysokość ze zdjęć było tylko 2 mm!) , Aż ktoś powiedział mi, czego brakuje:

Spróbuj ustawić height:auto;min-height:100%;

Zmień to dla swojej height:100%;linii, daje:

#### #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

Tuż przed tym nowo dodanego kodu mam to w moich Drupal Tendu tematów style.css:

html, body {wzrost: 100%;}

#page {background: #ffffff; wysokość: auto! ważne; wysokość: 100%; min-wysokość: 100%; pozycja: względna;}

Następnie muszę zrobić nowy blok w Drupal ze zdjęciem, dodając class=stretch:

<img alt = "" class = "stretch" src = "pic.url" />

Po prostu kopiowanie obrazu za pomocą edytora w tym bloku Drupala nie działa; należy zmienić edytor na niesformatowany tekst.

— Cybr
źródło
8

Zgadzam się z obrazem w absolutnej div ze 100% szerokością i wysokością. Upewnij się, że ustawiłeś 100% szerokość i wysokość ciała w CSS, a marginesy i wypełnienie ustawiono na zero. Inną kwestią, którą znajdziesz przy tej metodzie, jest to, że podczas zaznaczania tekstu obszar zaznaczenia może czasami obejmować obraz tła, co ma niefortunny efekt, że cała strona ma wybrany stan. Możesz obejść ten problem, stosując user-select:noneregułę CSS:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

Ponownie, Internet Explorer jest tutaj złym facetem, ponieważ nie rozpoznaje opcji wyboru użytkownika - nawet przeglądarka Internet Explorer 10 nie obsługuje jej, więc możesz użyć JavaScript, aby zapobiec wybraniu obrazu w tle (na przykład http : //www.felgall.com/jstip35.htm ) lub stosując metodę rozciągania tła CSS 3 .

Ponadto w przypadku SEO umieściłem obraz tła na dole strony, ale jeśli załadowanie obrazu tła trwa zbyt długo (tzn. Początkowo z białym tłem), możesz przejść na górę strony.

— Myke Black
źródło
to nie używaj img po prostu div z bg, nie powinno się go wybierać
— Jacek Pietal 18.10.13
7

Chciałem wyśrodkować i przeskalować obraz tła, nie rozciągając go na całą stronę, i chciałem zachować proporcje obrazu. To zadziałało dla mnie dzięki odmianom sugerowanym w innych odpowiedziach:

OBRAZ WEJŚCIOWY: ------------------------

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}
— AnnieDee
źródło
5

Użyłem kombinacji właściwości background-X CSS, aby uzyskać idealny skalowany obraz tła.

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

Dzięki temu tło zawsze pokrywa całe okno przeglądarki i pozostaje wyśrodkowane podczas skalowania.

— Ryan Den-Kaat
źródło
4

Użyj wtyczki Backstretch . Można nawet przesunąć kilka zdjęć. Działa również w kontenerach. W ten sposób na przykład można było pokryć tylko część tła obrazem tła.

Ponieważ nawet ja mogłem go uruchomić, dowodzi, że jest to łatwa w użyciu wtyczka :).

— Daniel
źródło
3

Jeśli chcesz, aby treść była wyśrodkowana poziomo, użyj kombinacji takiej jak ta:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

To będzie pięknie wyglądać.

— Samuel Ramzan
źródło
1

Za pomocą tej border-image : yourimagewłaściwości można przeskalować obraz do granicy. Nawet jeśli podasz obraz tła, zostanie na nim narysowany obraz obramowania.

Ta border-imagewłaściwość jest bardzo przydatna, jeśli arkusz stylów jest zaimplementowany w miejscu, które nie obsługuje CSS 3. Jeśli używasz Google Chrome lub Firefox, polecam background-size:coversamą właściwość.

— Natesh bhat
źródło
0

Czy chcesz to osiągnąć za pomocą jednego obrazu? Ponieważ w rzeczywistości można zrobić coś podobnego do rozciągającego się tła przy użyciu dwóch obrazów. Na przykład obrazy PNG .

Zrobiłem to już wcześniej i nie jest to takie trudne. Poza tym myślę, że rozciąganie zaszkodziłoby jakości tła. A jeśli dodasz ogromny obraz, spowolniłby powolne komputery i przeglądarki.

— MarioRicalde
źródło
Słuszna uwaga. Ale używam jpg jako obrazu tła, shes ma wymiary około 1500 x 1000 zajmuje tylko niewiele więcej niż 100 KB. Ale jak to zrobiłeś?
— Fábio Antunes,
1
Co powiesz na wyśrodkowanie obrazu w poziomie i złagodzenie krawędzi obrazu jednolitym kolorem lub wzorem? Umożliwi to płynną adaptację, jeśli użytkownik ma więcej niż rozdzielczość obrazu.
— MarioRicalde,
Ale chcę, aby obraz wypełniał tło. To, co mówisz, to jest to, co zwykle robię.
— Fábio Antunes,
0

Poniższe działało dla mnie.

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

które działało, aby pokryć całe tło w różnych wymiarach

— tony2tones
źródło
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.