Розтягування та масштабування фону CSS

Чи є спосіб отримати фон у CSS, щоб розтягнути або масштабувати, щоб заповнити його контейнер?

Для сучасних браузерів ви можете досягти цього за допомогою background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover означає розтягування зображення вертикально або горизонтально, щоб воно ніколи не плитка / повторювалося.

Це буде працювати для Safari 3 (або новішої версії), Chrome, Opera 10+, Firefox 3.6 або новішої версії та Internet Explorer 9 (або новішої версії).

Щоб він працював з нижчими версіями Internet Explorer, спробуйте такі CSS:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Використовуйте властивість CSS 3background-size :

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

Це доступно для сучасних браузерів з 2012 року.

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

Використовуйте цю розмітку:

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

із наступним CSS:

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

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

і вам слід зробити!

Для того щоб масштабувати зображення, щоб воно було "повним кровотоком" та підтримувало співвідношення сторін, ви можете зробити це замість цього:

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

Це виходить досить приємно! Якщо обрізати один вимір, він буде обрізаний лише на одній стороні зображення, а не рівномірно обрізаний з обох сторін (і по центру). Я перевірив це в Firefox, Webkit та Internet Explorer 8.

Використовуйте атрибут розміру фону в CSS3:

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

EDIT: Modernizr підтримує виявлення підтримки фонового розміру . Ви можете використовувати вирішення JavaScript, написане для роботи, однак він вам потрібен і динамічно завантажувати його, коли немає підтримки. Це дозволить зберегти код бездоганним, не вдаючись до настирливих CSS-хаків для певних браузерів.

Особисто я використовую скрипт для роботи з ним за допомогою jQuery, його адаптації imgsizer . Оскільки в більшості конструкцій я зараз використовую ширину% s для розкладки рідини на різних пристроях, є незначна адаптація до однієї з петель (враховуючи розміри, які не завжди є 100%):

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

EDIT: Можливо, вас також зацікавить jQuery CSS3 Finaliz [s] e .

Спробуйте статтю розміру фону . Якщо ви користуєтесь всім наведеним нижче, воно буде працювати в більшості браузерів, крім Internet Explorer.

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
} 

Наразі не. Він буде доступний у CSS 3 , але пройде певний час, поки він не буде реалізований у більшості браузерів.

.style1 {
        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 "Що б ні +"
• IE 9+
• Opera 10+ (розмір фонового режиму, підтримуваний Opera 9.5, але не ключові слова)
• Firefox 3.6 або новіших версій (Firefox 4 підтримує попередньо встановлену версію постачальника)

Крім того, ви можете спробувати це для рішення

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;

Заслуга цієї статті від Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

Одним словом: ні. Єдиний спосіб розтягнути зображення - це <img>тегом. Вам доведеться бути творчим.

Це було правдою у 2008 році, коли відповідь була написана. Сьогодні сучасні браузери підтримують, background-sizeщо вирішує цю проблему. Слідкуйте за тим, щоб IE8 не підтримував це.

Визначте "розтягнення і масштаб" ...

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

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

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

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

Якщо ви використовуєте векторну графіку, ви боюсь поза моєю сферою досвіду, боюся.

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

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

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

Додати background-attachmentрядок:

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

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

Я хотів би зазначити, що це рівнозначно:

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

Ще одне чудове рішення для цього - Backstretch Srobbin, який можна нанести на тіло або будь-який елемент сторінки - http://srobbin.com/jquery-plugins/backstretch/

Спробуйте це

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

Додатковим підказом для чіт SolidSmile є масштабування (пропорційне зміна розмірів) шляхом встановлення ширини та використання автоматичного для висоти.

Наприклад:

#background {
    width: 500px;
    height: auto;
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

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