Rozciąganie i skalowanie obrazu CSS w tle - tylko przy użyciu CSS

Question

Rozciąganie i skalowanie obrazu CSS w tle - tylko przy użyciu CSS

Chcę, aby mój obraz tła rozciągał się i skalował w zależności od rozmiaru widoku przeglądarki.

Widziałem kilka pytań na Stack Overflow, które wykonują tę pracę, jak rozciąganie i skalowanie tła CSS na przykład. Działa dobrze, ale chcę umieścić obraz za pomocą background, a nie za pomocą znacznika img.

W tym miejscu umieszczany jest znacznik img, a następnie za pomocą CSS podajemy znacznik img.

width:100%; height:100%;

Działa, ale to pytanie jest trochę 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 pierwszego , Ale mi nie wyszło.

Czy jest dobra metoda, aby to zrobić z background-image deklaracji?

755

css background

Author: Community, 2009-07-19

Source

18 answers

Możesz użyć właściwości CSS3, aby zrobić to całkiem ładnie. Zmienia rozmiar do proporcji, więc nie zniekształca obrazu(chociaż nie skaluje małych obrazów). Pamiętaj, że nie jest jeszcze zaimplementowany we wszystkich przeglądarkach.

background-size: 100%;

451

Author: Matt Burgess,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-28 00:44:54

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 pożądany efekt: przewija się tylko zawartość, a nie tło.

Obraz tła zmienia rozmiar do widoku przeglądarki dla dowolnego rozmiaru ekranu. Gdy zawartość nie pasuje do widoku przeglądarki, a użytkownik musi przewijać stronę, obraz tła pozostaje stały w widoku podczas przewijania zawartości.

Z CSS 3 wydaje się, że byłoby to dużo łatwiej.

181

Author: Fábio Antunes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:37

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*/
}

159

Author: CelticParser,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-16 00:18:10

background-size: 100% 100%;

Rozciąga bg, aby wypełnić cały element na obu osiach

44

Author: yeahdixon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-26 18:34:37

Poniższa 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 znacznika 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 obrazek tła dla wszystkich stron, możesz usunąć zmienną $pic, usunąć wycinające ukośniki, 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');
}

To zostało przetestowane z Internet Explorer 9, Chrome 21 i Firefox 14.

39

Author: Thorsten Niehues,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-18 17:17:51

Użyj tego CSS:

background: url('img.png') no-repeat; 
background-size: 100%;

17

Author: RSH1,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-09 09:41:32

Można rzeczywiście osiągnąć taki sam efekt jak obraz tła z tagiem img. Wystarczy ustawić jego indeks z niżej niż Wszystko inne, ustawić position: absolute i użyć przezroczystego tła dla każdego pola na pierwszym planie.

16

Author: Kim Stebel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-07-19 17:14:39

Możesz dodać tę klasę do swojego 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 później
Chrome Whatever or later
Internet Explorer 9 lub nowszy
Opera 10 lub nowsza (Opera 9.5 obsługiwana background-size, ale bez słów kluczowych)

14

Author: Arunraj S,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-14 19:30:19

Wyjaśnione przez css-tricks https://css-tricks.com/perfect-full-page-background-image/

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

12

Author: Aamer Shahzad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-28 06:29:17

Aby odpowiednio przeskalować obrazy w oparciu o rozmiar kontenera, należy:

{
background-size:contain;
background-repeat: no-repeat;
}

10

Author: justinpees,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-07 18:52:38

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>

9

Author: Mahdi jokar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-30 15:55:07

Zgadzam się z obrazkiem w absolutnym div ze 100% szerokością i wysokością. Upewnij się, że ustawiłeś 100% szerokość i wysokość dla ciała w CSS oraz Ustawiłeś marginesy i padding na zero. Inną kwestią związaną z tą metodą jest to, że podczas zaznaczania tekstu obszar zaznaczenia może czasami obejmować obraz tła, co ma niefortunny efekt sprawiania, że cała strona ma wybrany stan. Możesz to obejść używając reguły user-select:none CSS, w następujący sposób:

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

Znowu, Internet Explorer jest tym złym, ponieważ nie rozpoznaje opcji wyboru użytkownika - nawet Internet Explorer 10 preview go nie obsługuje, więc możesz użyć JavaScript, aby zapobiec zaznaczaniu obrazu w tle (na przykład http://www.felgall.com/jstip35.htm ) lub używając metody CSS 3 background-stretch.

Również dla SEO umieściłbym obraz tła na dole strony, ale jeśli obraz tła trwa zbyt długo, aby załaduj (to znaczy początkowo z białym tłem), możesz przenieść się na górę strony.

8

Author: Myke Black,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-23 15:54:19

Dzięki!

Ale wtedy nie działało to dla Google Chrome iSafari (rozciąganie działało, ale wysokość zdjęć wynosiła tylko 2 mm!) , dopóki ktoś mi nie powiedział czego brakuje:

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

Więc zmień to dla swojejheight: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 dodanym kodem mam to w moim Drupal Tendu themes style.css:

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

Następnie muszę zrobić nowy blok w Drupalu ze zdjęciem podczas dodawania class=stretch:

Samo kopiowanie obrazka z edytorem w tym bloku Drupala nie działa; trzeba zmienić edytor na tekst sformatowany.

7

Author: Cybr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-22 12:09:52

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

INLINE IMAGE: ------------------------

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

6

Author: AnnieDee,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-22 12:09:19

Użyj wtyczki Backstretch . Można nawet mieć kilka zdjęć slajdów. Działa również w pojemnikach. 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ć udowadnia, że jest to łatwy w użyciu plugin :).

4

Author: Daniel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-22 12:15:46

Możesz użyć border-image : yourimage właściwość aby przeskalować obraz do obramowania , nawet jeśli podasz obraz tła , wtedy obraz obramowania zostanie narysowany na nim.

Właściwość Border-image jest bardzo przydatna, jeśli Twój arkusz stylów jest zaimplementowany gdzieś, gdzie nie obsługuje CSS3 . Jeśli używasz chrome z Firefoksa, to polecam Właściwość background-size:cover.

1

Author: Natesh bhat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-02 13:51:27

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

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

-1

Author: MarioRicalde,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-30 15:51:34

score 912 · Accepted Answer

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

To skaluje obraz tak, że obszar tła jest całkowicie pokryty obrazem tła, zachowując proporcje obrazu. Cały obszar zostanie pokryty, jednak część obrazu może nie być widoczna, jeśli szerokość / wysokość zmienionego obrazu jest zbyt duża