Розтягніть і масштабуйте зображення CSS у фоновому режимі - лише для CSS

853

Я хочу, щоб моє фонове зображення розтягувалося та масштабувалося залежно від розміру вікна перегляду браузера.

Я бачив кілька запитань щодо Stack Overflow, які виконують цю роботу, як, наприклад, Stretch та масштабування CSS-фону . Це добре працює, але я хочу розмістити зображення за допомогою background, а не з imgтегом.

У цьому imgрозміщується один тег, а потім за допомогою CSS даємо належне imgтегу.

width:100%; height:100%;

Це працює, але це питання трохи старе, і вказується, що в CSS 3 зміни розміру фонового зображення буде працювати досить добре. Я спробував цей приклад перший , але мені це не вийшло.

Чи є хороший метод зробити це з background-imageдекларацією?

css  background 
— Фабіо Антунес
джерело
113
фоновий розмір: 100% 100%;
— Андреас Л.
5
Може бути , це демо може бути корисно: w3schools.com/cssref / ...
— Davide
1
— Alex Angas
@AlexAngas Чи не повинен вік питання бути фактором? Цю задали 6 років тому, а питання, які ви вказали, задали 4 роки тому.
— Фабіо Антунес
@ FábioAntunes IMHO, ми б не хотіли закривати питання найкращими відповідями, а натомість заохочуємо дублікати до посилання на нього. Я впевнений, що це було б обговорено на Meta, але я зараз не можу її знайти ...
— Alex Angas

Відповіді:

1047

CSS3 має приємний маленький атрибут під назвою background-size:cover.

Це масштабує зображення так, щоб фонова область повністю покривалась фоновим зображенням, зберігаючи співвідношення сторін. Буде вкрита вся територія. Однак частина зображення може бути невидимою, якщо ширина / висота зміненого зображення занадто велика.

— Вашишта Джогі
джерело
11
Покрийте обрізане зображення, якщо співвідношення сторін не збігається, тому це не є хорошим загальним рішенням.
— mahemoff
1
якщо ви хочете, щоб він працював у браузерах IE - github.com/louisremi/background-size-polyfill
— Wreeecks
4
Схоже, це не працює на Firefox. Тим background-size: 100vw 100vh;не менш, це робить трюк добре.
— Янік Маурай
5
Спробуйте @YannickMauray: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
— Amit Kumar Khare
2
Якщо ви хочете, але тільки для горизонтальній осі, використовуйте це: background-size: 100% auto; stackoverflow.com/questions/41025630 / ...
— antoineMoPa
470

Ви можете використовувати властивість CSS3, щоб зробити це досить добре. Він змінює розмір співвідношення, щоб не було спотворень зображень (хоча це робить і невеликі зображення). Зауважте лише, що він ще не застосовується у всіх браузерах.

background-size: 100%;
— Метт Берджесс
джерело
19
@nXqd Це майже повний код! Створіть контейнер з а background-imageта додайте властивість вище. Як вже було сказано, підтримка браузера ще не є хорошою, і існують конкретні для цього браузера версії, тобто. -webkit-background-sizeтощо. Див. модуль W3C CSS3: розмір фону та css3.info: розмір фону
— MrWhite
15
Для збереження співвідношення сторін зображення слід використовувати "background-size: cover;" або "фоновий розмір: містити;". Я створив polyfill, який реалізує ці значення в IE8: github.com/louisremi/background-size-polyfill
— Луї-Ремі
4
Доцільно також додати, autoщоб зберегти співвідношення сторін.
— Chibueze Opata
186

Використовуючи код, який я згадав ...

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

Це дає бажаний ефект: прокручуватиметься лише вміст, а не фон.

Фонове зображення змінює розмір вікна перегляду браузера для будь-якого розміру екрана. Якщо вміст не відповідає вікні перегляду браузера, і користувачеві необхідно прокрутити сторінку, фонове зображення залишається фіксованим у вікні перегляду, а вміст прокручується.

З CSS 3, здається, це було б набагато простіше.

— Фабіо Антунес
джерело
12
Але це не фонове зображення. Це можна зробити лише для блоку, але не для вбудованого елемента, такого як введення [type = текст]. Або я помиляюся?
— deerchao
11
немає потреби в класі = "stretch", просто використовуйте #background img {} як ідентифікатор у css
— BerggreenDK
z-індекс: -1; зберігає ваше зображення у фоновому режимі. Якщо ви хочете показати своє зображення на передньому плані, ви можете або збільшити значення z-індексу, або видалити цей індекс.
— gokhanakkurt
Проблема, яка у мене виникає, стосується IE8. Фонове зображення DIV розтягується повністю, але в IE8 зображення виходять за межі DIV, отже, не в змозі побачити повне зображення. Це вистригається. Ось моє запитання: stackoverflow.com/questions/22331179 / ...
— СІ8
1
Очевидна помилка, яку люди роблять, - це помістити фонове зображення в css (тобто за допомогою background : url("example.png");), а потім використовувати атрибут css background-size:100%;під ним, щоб сподіватися масштабувати зображення до ширини екрана. Це не спрацює, чи не так? Якщо ви хочете поставити фонове зображення для тіла, тоді атрибут зображення слід додати до тега body, як <body background="example.png">. Потім використовуйте css, background-size:100%;щоб масштабувати його.
— 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*/
}
— Джош Крозьє
джерело
Однак це не працює в IE8. Це створює поле у ​​верхній і нижній частині вікна.
— erdomester
На Android він працював при використанні html, body {...}замість body {...}.
— Едвард
53 
background-size: 100% 100%;

розтягує фон, щоб заповнити весь елемент на обох осях.

— yeahdixon
джерело
40

Наступна частина CSS повинна розтягнути зображення на всіх браузерах.

Я роблю це динамічно для кожної сторінки. Тому я використовую PHP для створення власного тегу HTML для кожної сторінки. Усі фотографії знаходяться у папці "зображення" і закінчуються "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\')\
";>

Якщо у вас є лише одне фонове зображення для всіх сторінок, ви можете видалити $picзмінну, видалити прокладені косої риски, налаштувати шляхи та помістити цей код у свій 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');
}

Це було перевірено за допомогою Internet Explorer 9, Chrome 21 та Firefox 14.

— Торстен Niehues
джерело
2
Ваш приклад не працює у відношенні сумісності ззаду, тому що ви просто забули про провідні префікси постачальника. Повинно бути -webkit-background-size, -moz-background-sizeі так далі. Дивіться developer.mozilla.org/en-US/docs/CSS/… Або ви намагаєтеся включити його в майбутнє у короткострокові властивості на кшталтbackground: url(img/bg-home.jpg) no-repeat center center / cover fixed;
— Volker E.
Це єдине рішення, яке могло працювати для мене на IE9. Дякую.
— robnick
17

Насправді ви можете досягти такого ж ефекту, що і фонове зображення за допомогою тегу img. Вам просто потрібно встановити його z-індекс нижче за все інше, встановити позицію: абсолютну та використовувати прозорий фон для кожного поля на передньому плані.

— Кім Стебель
джерело
Ось, що я бачив в інших ТАК питаннях, і працює, але оскільки CSS3 як вийшов, я подумав, що зараз це кращий шлях до цього.
— Fábio Antunes
3
Можливо, і з огляду на розробки використання браузера, ви можете використовувати їх комерційно лише за ... 10 років?
— Кім Стебель
Будучи CSS3, немає нічого поганого в тому, щоб використовувати властивість, яку бачать найсучасніші браузери, і надавати мінімальний стандарт непідтримуваним браузерам. Наприклад, тут, можливо, ви зможете використовувати нудний, але прийнятний кахельний фон для <IE8 та прекрасну картинку для Firefox / Chrome / Safari / Opera. Також існує багато поліфілів для реплікації функціональності CSS3 у старих браузерах із JavaScript. Іншими словами, вам не потрібно чекати, коли кожен браузер підтримує CSS3, щоб ним користуватися.
— Ден Удар
Щойно знайшла цю іншу публікацію, в якій згадується використання фірмового MS AlphaImageLoader: stackoverflow.com/questions/2991623/…
— uglymunky
17

Використовуйте цей CSS:

background: url('img.png') no-repeat; 
background-size: 100%;
— RSH1
джерело
15

Це пояснюється трюками CSS: Ідеальне зображення на повній сторінці

Демонстрація: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

Код:

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;
}
— Аамер Шахзад
джерело
Виходячи з вищенаведеної відповіді, я бачив, що виправлення фонових вкладень не працює на мобільних пристроях та на мікрософт. Ідеальне рішення зробити фонову розтяжку та виправити на всіх пристроях та браузерах, я рекомендую jquery-backstretch.com
— Shahzad
15

Ви можете додати цей клас у свій 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;
}

Він працює в:

  • Сафарі 3 або новішої версії
  • Chrome Незалежно від цього або пізнішого
  • Internet Explorer 9 або новішої версії
  • Opera 10 або пізнішої версії (підтримується Opera 9.5 background-size, але не ключові слова)
  • Firefox 3.6 або новішої версії (Firefox 4 підтримує попередньо встановлену версію не постачальника)
— Arunraj S
джерело
Це робоча відповідь "розтягнути, щоб відповідати". Примітка: співвідношення сторін зміниться.
— devdrc
10

Щоб правильно масштабувати зображення, залежно від розміру контейнера, використовуйте наступне:

background-size: contain;
background-repeat: no-repeat;
— Justinpees
джерело
9

Я використовую це, і він працює з усіма браузерами:

<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

Дякую!

Але тоді це не працювало для браузерів Google Chrome і Safari (розтяжка працювала, але висота фотографій становила всього 2 мм!) , Поки хтось не сказав мені, чого не вистачає:

Спробуйте встановити height:auto;min-height:100%;

Тож змініть, що для вашої height:100%;лінії дає:

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

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

Перед цим щойно доданим кодом я маю це у своїх темах Drupal Tendustyle.css :

html, корпус {зріст: 100%;}

#page {фон: #ffffff; висота: авто! важливо; висота: 100%; мінімальна висота: 100%; положення: відносна;}

Тоді я повинен зробити новий блок в Drupal із зображенням, додаючи class=stretch:

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

Просто копіювання зображення в редактор у цей блок Drupal не працює; треба змінити редактор на неформатований текст.

— Кібр
джерело
8

Я погоджуюсь із зображенням в абсолютному розділі зі 100% шириною та висотою. Переконайтеся, що ви встановили 100S ширину та висоту для тіла в CSS, а поля та підкладку встановіть до нуля. Інша проблема, яку ви знайдете при цьому методі, полягає в тому, що під час вибору тексту область виділення іноді може охоплювати фонове зображення, що має невдалий ефект, коли повна сторінка має вибраний стан. Ви можете подолати це за допомогою user-select:noneправила 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>

Знову ж, Internet Explorer тут поганий хлопець, оскільки він не розпізнає параметр вибору користувача - навіть Internet Explorer 10 попередній перегляд не підтримує його, тому у вас є можливість або використовувати JavaScript для запобігання вибору фонового зображення (наприклад, http : //www.felgall.com/jstip35.htm ) або за допомогою методу CSS 3 background-stretch.

Також для SEO я б розмістив фонове зображення внизу сторінки, але якщо завантажувати фонове зображення буде занадто довго (тобто з білим фоном спочатку), ви можете перейти до верхньої частини сторінки.

— Майк Блек
джерело
то не використовуйте img просто div з bg, то його не слід вибирати
— Jacek Pietal
7

Я хотів зосереджувати фоновий малюнок і масштабувати його, не розтягуючи його на всю сторінку, і хотів, щоб співвідношення сторін було збережене. Це працювало для мене завдяки варіаціям, запропонованим в інших відповідях:

ІНЛАЙН-ІМІДЖ: ------------------------

<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%;
}
— ЕнніДі
джерело
5

Для досягнення ідеального масштабування фонового зображення я використав комбінацію властивостей CSS background-X.

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

Завдяки цьому фон завжди охоплює все вікно браузера і залишається в центрі під час масштабування.

— Райан Ден-Каат
джерело
4

Використовуйте плагін Backstretch . Можна навіть мати кілька слайдів зображень. Він також працює в контейнерах. Так, наприклад, можна було б лише частину фону покрити фоновим зображенням.

Оскільки навіть я міг змусити його працювати, це доводить, що плагін є простим у використанні :).

— Даніель
джерело
3

Якщо ви хочете, щоб вміст був орієнтований горизонтально, використовуйте таке поєднання:

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

Це буде виглядати красиво.

— Самуель Рамзан
джерело
1

Ви можете використовувати border-image : yourimageвластивість для масштабування зображення до межі. Навіть якщо ви надаєте фонове зображення, на ньому буде намальовано рамкове зображення.

border-imageВластивість дуже корисно , якщо таблиця стилів здійснюється де - то , який не підтримує CSS 3. Якщо ви використовуєте Google Chrome або Firefox, то я рекомендую background-size:coverсам власність.

— Натеш бхат
джерело
0

Ви хочете досягти цього лише за допомогою одного зображення? Тому що ви можете зробити дещо схожий на розтягуючий фон, використовуючи два зображення. Наприклад, зображення PNG .

Я робив це раніше, і це не так складно. Крім того, я думаю, що розтягнення тільки зашкодить якості фону. А якщо додати величезне зображення, це сповільнить повільні комп'ютери та браузери.

— MarioRicalde
джерело
Гарна думка. Але я використовую jpg для фонового зображення, вона приблизно 1500x1000 займає лише трохи більше 100 кбіт. Але як ти це зробив?
— Фабіо Антунес
1
Як щодо центрування зображення по горизонталі та пом’якшення країв зображення суцільним кольором чи малюнком? Це дозволить вам зробити бездоганну адаптацію, якщо користувач має більше, ніж роздільна здатність зображення.
— MarioRicalde
Але я хочу, щоб зображення заповнювало фон. Один ваш вислів, ось що я зазвичай роблю.
— Фабіо Антунес
0

Наступне працювало для мене.

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

які працювали, щоб охопити весь фон у різних вимірах

— tony2tones
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.