, який ми робимо в 2 рази більше за розмір вікна. А саме зображення ми розтягуємо та поміщаємо по центру.

div.background ( position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; ) img ( position: absolute; top: 0; left: 0; right: 0; bottom : 0; margin: auto; min-width: 50%; min-height: 50%;

Цей спосіб працює в хороших браузерахта IE 8+.

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

Тут якнайдокладніше розберемо. як можна реалізувати фон (background) інтернет ресурсу, що має покривати весь робочий простір. В основному все робиться на CSS3Також можна підключити jQuery і навіть PHP, але розглянемо один варіант, який на чистому CSS. Для початку потрібно зрозуміти чи визначити, що має вийде. Це безумовно, повноцінна заливка вікна тлом або зображенням, щоб не було жодних прогалин.

Де розтягуватимемо картинку, так щоб вона виглядала коректно, тому що якщо йде фон під одним відтінком кольору, з ним легше працювати. Не забуваймо про відповідність картинки на її пропорцій. І обов'язково має вийти, що зображення встановилося по центру. Що головне, все має бути максимально кроссбраузерно і зрозуміло, без різних махінацій з flash.

Метод CSS3 background

Це найпоширеніший метод, що може розтягнути background на чистому CSS, і все завдяки одній властивості, під назвою background-size що тільки буде присутній у CSS3.

Тут спочатку створимо фіксованим background і виставимо його по центру, що залишиться його тільки розтягнути, де підключаємо властивості background-size, це все йде під посилання на фон.

У загальному орієнтуємося з блоком, якому присвоюємо стилі і дописуємо у файлі стилів цьому блоку, наступний код:

body(
background: url(http://сайт/Aben/ABGDA/artunsa.png) no-repeat center top fixed;
-webkit-background-size: cover;
-Moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Як можна помітити, що параметр background, де спочатку додаємо шлях на картину, де відбувається встановлення положення зображення у відповідність вікна екрану. Якщо розбирати, то значення centerі top відповідає центр і притискання з усіх боків, ніж було прогалин. Щоб було зрозуміло, то значення fixed- Відповідає за функцію фіксацій.

Спосіб дуже простий, що застосовую завжди і він мене влаштовує на всі 100% відсотків.

Ще один спосіб :

Ще один простий спосіб реалізувати напевно, вставити картину на сторінку. Вона буде мати фіксовану позицію і буде розміщена у верхньому лівому кутку. Ми надамо їй min-width і min-height 100%. Ще потрібно заздалегідь підготувати картину, намір пропорційності сторін.

#сайт (
position:fixed;
top:0;
left:0;
min-width:100%;
min-height: 100%;
}

Тут можна помітити, що цей код не центрує background image, що можна швидко все зробити як потрібно, а точніше фіксувати зображення за допомогою взяття її в div.

CSS

#сайт (
position:fixed;
top: -50%;
left: -50%;
width:200%;
height:200%;
}
#сайт img (
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height: 50%;
}

На цьому все тут представлені не всі способи, а ті, які більше змінюють.

Також невелике відео, де все зрозуміло пояснюють як за допомогою CSS розтягнути фон на весь екран.

PS- якщо у вас є свої напрацювання, хоча тут має однаково бути. то пліз у коментарях поділіться з ними.

Доброго часу доби, гіки сайтобудування та любителі веб-тематики. Сьогодні я хочу дати відповідь на питання, що часто ставиться не тільки новачками, а іноді й розробниками: «Як розтягнути зображення cssна весь екран?" Насправді такий прийом дуже просто реалізовується, але тут річ в іншому.

На сьогоднішній день існує безліч способів та мов програмування, завдяки яким зображення може розміщуватись на цілий екран. Тому в даній публікації я розповім про декілька способів створення повнорозмірного фонового зображення при допомоги css, css3, jquery та php. Приступимо до справи!

Спосіб 1. Адаптивна фонова картинка css-засобами

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

Для цього потрібно лише написати ось такий рядок:

background-size: 100%auto

Перший параметр, тобто. 100% відповідає за розтягування картинки по горизонталі, другий параметр - по вертикалі. Тепер перейдемо, наприклад.

Такий спосіб підтримують браузери, починаючи з 10 версії, 3 версії Safari, Firefox 3.6 та 9 версії IE.

Спосіб 2. Гумове тло за допомогою css3

З виходом у світ специфікації css3 до мови додалося багато зручних інструментів. Так, для створення розтягнутого фону у вигляді зображення використовується та ж властивість, що й у попередньому розділі, однак розмір зображення задається не відсотками, а спеціальним словом cover: background-size:cover. Дуже зручно, чи не так?

Щоб подивитися, як працює дана властивість, запустіть попередній приклад, змінивши параметри background-size 100% і auto на cover.

Сам по собі jQuery дуже зручний. З ним простіше працювати з API, легше отримати доступ до різних елементів коду, а також простіше реалізовувати деякі речі.

Для того, щоб у прикладі заробив даний спосіб, потрібно спочатку підключити скрипт js ось таким рядком:

Нижче я прикріпив програмний код прикладу з уже вставленою реалізацією jQuery.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

Планетар на відкритій місцевості! Пізнайте далекі зірки, планети та кратери місяця.

Цей спосіб є універсальним та підтримується багатьма браузерами навіть тоді, коли css-інструменти не працюють.

Спосіб 4. Php-реалізація розтягнутого на весь екран зображення

Декілька слів про саму мову. Php прийнято називати мовою сценаріїв. З його допомогою пишуть серверну частинувеб-додатків, тобто. пов'язують сервіс із базою даних, обробляють запити тощо. Сам код phpвпроваджується в html та гнучко взаємодіє з ним.

Щоб вставити шматок коду, потрібно прописати текст у таких дужках:

А тепер у початковий приклад вам потрібно вставити лише кілька рядків:

1 2 3 4 5

Завдання

Розтягніть фонову картинку на всю ширину вікна браузера за допомогою CSS3.

Рішення

Для масштабування фону призначено властивість background-size, як його значення вказується 100%, тоді фон займатиме всю ширину вікна браузера. Для старих версій браузерів слід використовувати специфічні властивості префіксів, як показано в прикладі 1.

Приклад 1. Розтягується фон

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат даного прикладупоказано на рис. 1.

Рис. 1. Вид фону при зменшеному розмірі вікна

При збільшенні розміру вікна браузера фон почне розширюватися, це призведе до погіршення вигляду картинки (рис. 2).

Рис. 2. Вид фону при збільшеному розмірі вікна

Виявив цей урок на одному каналі youtube. Дуже корисна фішка для веб-дизайнера на мій погляд.

Іноді ширини оригінального зображеннянедостатньо для будь-якої дизайнерської задумки, яке розтягування по ширині спотворює потрібні об'єкти. Щоб зберегти ці об'єкти цілістю і при цьому розтягнути фон зображення, PhotoShop надає нам певні інструменти. І так, зрештою, у нас з оригінального зображення:

Повинно вийти ось що:

Приступимо. Відкриваємо наше зображення у PhotoShop та виділяємо необхідний нам об'єкт:

Далі переходимо на вкладку Виділення >> Зберегти виділену область

І задаємо якесь довільне ім'я для даного виділення:

Таким чином, ми створили область, яка буде захищена від змін. Наступним кроком переходимо в Редагування >> Масштаб з урахуванням вмісту:

І обов'язково вказуємо об'єкт, що захищається:

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