Растягивание фона изображения с сохранением на нем пропорций определенного объекта. Как растянуть картинку на весь экран с помощью css и других проверенных способов Изображение css во весь экран

Помню перерыл много информации и испробовал не мало способов, пока не нашел именного того решения, что нужно было именно в тот момент.

Ниже я покажу 3 способа, которые растягивают фон на всю ширину экрана.

Способ №1

Первый способ использует чистый CSS3 . Все получается благодаря свойству background-size . В моем случаи я буду растягивать картинку на всю ширину экрана, то есть присвою свойства к тегу body . Вы можете применить по надобности к блоку например.

Растягивать на весь экран будем вот эту картинку с милой девушкой 🙂

В общим определяемся с блоком которому присваиваем стили и дописываем в файле стилей данному блоку, следующий код:

Body{ background: url(images/bg.jpg) no-repeat center top fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Как видите, в параметре background добавляем путь к изображению и устанавливаем положение картинки относительно экрана. В нашем случаи это center и top. Это означает что картинка будет в центре экрана, и прижата своим верхом к верху экрана. Это для того, чтобы всегда было видно лицо девушки. Если у Вас например абстрактный фон или природа, где видно небо, поле, горизонт, то можно поставить значения center и center. В общим если вы знакомы с CSS, то думаю разберетесь. Также установлено значение fixed , которое фиксирует изображение.

Способ очень простой, я его использую всегда и он меня устраивает на все 100%. Есть лишь одно но. Старые браузеры, не знакомы с CSS3, поэтому те кто используют древние версии не увидят должного результата.

Способ №2

Данный способ использует обычный CSS. По сути тоже простой. Выводим в теле сайта изображение присвоив id - bg :

И прописываем стили:

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

Позиционирование фиксированное и проходит растяжение на весь экран.Вот так просто:).

Способ №3

Тут применяется jQuery . Поэтому сначала нужно подключить библиотеку, если она не подключена ранее.

После библиотеки подключаем скрипт, который и будет масштабировать наш фон

$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ((theWindow.width() / theWindow.height()) < aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

И в конце добавляем стилей, чтобы все работало. Открываете файл стилей и добавляете в него следующий код:

#bg { position: fixed; top: 0; left: 0;z-index: -1; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

По стилям видно, что мы добавили позиционирование. В данном случаи это fixed . Изображение при прокрутке будет оставаться фиксированным фоном, если же изменить позиционирование на absolute , то фон можно прокрутить. Кстати, так же можно сделать и с первыми двумя способами.

Также указан параметр - z-index: -1 , для того чтобы картинка была за текстом. Если у Вас нет текста, который должен быть спереди, можете убрать этот параметр.

Какой способ использовать, решать Вам. Как и писал Выше, мне более близок первый способ. Он самый простой и не хуже других.

На этом все, спасибо за внимание. 🙂

Веб технологии, как и различного рода тенденции в дизайне, не стоят на месте, поэтому каждый раз появляются какие-то оригинальные фишки и нюансы для сайтов. Одним из подобных «направлений» является использование фона (backgorund), который растягивается на весь экран по ширине и высоте. Что-то вроде около года назад или больше я рассказывал — изображение помещалось в шапку блога и плавно «переходило» в основной фоновый цвет веб-страницы. При желании можно даже добавить .

Размещение в качестве бекграунда большой масштабируемой картинки — это что-то новое и более сложное занятие, решение которого нашел в этой статье .

Цель данного урока разместить на сайте фоновую картинку, которая бы постоянно закрывала весь фон окна браузера. Что же конкретно нужно сделать:

• заполнить всю страницу одним изображением без пробелов;
• изменение размеров картинки при необходимости (уменьшении окна браузера);
• сохранение пропорций изображения;
• расположение изображения в центре страницы;
• отсутствие полос прокрутки на странице;
• кросс-браузерное решение, подходящее для разных браузеров;
• реализация без всяких сторонних технологий типа flash.

Итак, имеется сразу несколько подходящих решений для фона сайта на весь экран.

Замечательное, простое и прогрессивное решение с помощью CSS3

Для реализации задачи мы можем использовать свойство background-size в CSS3. Будем использовать элемент html который получше body. Установим фиксированный и центрированный бэкграунд, после чего будем использовать в background-size значение cover.

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

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

Решение поддерживают почти все популярные в сети:

• Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
• Opera 10+ (Opera 9.5 поддерживает background-size но без значения cover)
• Chrome Whatever+
• IE 9+
• Safari 3+

Некий Goltzman нашел решение, которое позволяет работать хаку в IE

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

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

Но внимание!!! при этом могут возникнуть некоторые проблемы с работой ссылок на странице. Кстати, чуть позже Matt Litherland добавил что код, в принципе, можно использовать но для этого нельзя применять элементы html или body а нужно реализовать все через div с 100% высотой и шириной.

CSS -хак номер 1

Альтернативную версию представляет Doug Neiner. В этом случае используется встроенный в страницу элемент , который может изменять размер в любом браузере. Устанавливаем значение min-height, которое способствует заполнению окна браузера вертикально и ставим 100% для width, что заполняет страницу горизонтально. Также ставим min-width чтобы изображение никогда не было меньшим, чем оно есть на самом деле.

img.bg { /* Set rules to fill background */ min-height : 100% ; min-width : 1024px ; /* Set up proportionate scaling */ width : 100% ; height : auto ; /* Set up positioning */ position : fixed ; top : 0 ; left : 0 ; } @media screen and (max-width : 1024px ) { /* Specific to this particular image */ img.bg { left : 50% ; margin-left : -512px ; /* 50% */ } }

img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }

Работает в любых версиях качественных браузеров — Safari / Opera / Firefox и Chrome. Для IE как всегда есть свои нюансы:

• IE 9 — работает;
• IE 7/8 — чаще всего функционирует правильно, но не центрирует изображения меньше окна браузера;
• IE 6 — можно настроить, но кому вообще нужен этот браузер.

CSS -хак вариант 2

Еще один вариант решения задачи с помощью CSS стилей это разместить встроенное изображение на странице с фиксированной позицией в левом верхнем углу, после чего задать для min-width и min-height значение 100% сохраняя пропорции.

#bg { position : fixed ; top : -50% ; left : -50% ; width : 200% ; height : 200% ; } #bg img { position : absolute ; top : 0 ; left : 0 ; right : 0 ; bottom : 0 ; margin : auto ; min-width : 50% ; min-height : 50% ; }

#bg { position:fixed; top:-50%; left:-50%; width:200%; height:200%; } #bg img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; }

Хак работает в:

• Safari / Chrome / Firefox (слишком ранние версии не тестировались, но в последних работает хорошо)
• IE 8+
• Opera (любая версия) и вместе с IE both оба глючат одинаково с ошибкой позиционирования.

Метод с jQuery

Данный вариант намного легче (с точки зрения CSS) если мы знаем что соотношение сторон картинки (img используется в качестве фона) больше или меньше текущего соотношения окна браузера. Если меньше, то мы можем использовать только width = 100% и при этом по ширине и высоте окно будет одинаково заполнено. Если больше — можно указать только height = 100% для заполнения всего окна.

Доступ ко всем данным идет через JavaScript, коды используются следующие:

#bg { position : fixed ; top : 0 ; left : 0 ; } .bgwidth { width : 100% ; } .bgheight { height : 100% ; }

#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ((theWindow.width() / theWindow.height()) < aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

По моему, центрирование в этом случае не производится (насколько я понял), но его можно сделать. Поддерживается большинство десктопных браузеров, в том числе IE7+. Напоследок автор статьи про хаки подготовил набор файлов примеров, в которых это все реализована — скачать можно . В комментариях к статье-оригиналу также содержится некоторая информация и обсуждение, хотя большинство важных деталей автор добавлял в виде апрейтов к посту и у меня он также переведены и указаны. Конечно, разобраться во всем этом помогут и примеры. В целом, если бы не постоянные «приколы» от IE7 все упомянутые хаки были бы идеальными.

P.S. Хотите купить книгу? — не обязательно ходить в магазине ведь сейчас онлайн книжный интернет магазин позволяет сделать все через сеть — выбрать, оплатить и оформить доставку на дом.

Обнаружил данный урок на одном канале youtube. Очень полезная фишка для веб-дизайнера на мой взгляд.

Иногда ширины оригинального изображения недостаточно для какой-либо дизайнерской задумки, а его растягивание по ширине искажает нужные объекты. Чтобы сохранить эти объекты в целости и при этом растянуть фон изображения, PhotoShop предоставляет нам определенные инструменты. И так, в конечном итоге у нас из оригинального изображения:

Должно получиться вот что:

Приступим. Открываем наше изображение в PhotoShop и выделяем необходимый нам объект:

Далее переходим на вкладку Выделение >> Сохранить выделенную область

И задаем какое-нибудь произвольное имя для данного выделения:

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

И обязательно указываем защищаемый объект:

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

Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).

Итак, требования к фоновому изображению у нас следующие:

• Покрывается 100% ширины и высоты страницы
• Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
• Сохраняются пропорции картинки (aspect ratio)
• Изображение центрировано на странице
• Фон не вызывает скроллов
• Решение максимально кроссбраузерное
• Не используются никакие другие технологии кроме CSS

Способ 1

На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный. Он использует свойство CSS3 background-size , которое мы применяем к тегу html . Именно html , а не body , т.к. его высота больше или равна высоте окна браузера.

Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-size: cover .

Html { background-image: url(images/background.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Этот способ работает в

Chrome (любая версия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Для того чтобы изображения загружались быстро, размещайте свои сайты только у проверенных хостинг-провайдеров, например, Пользователи и поисковые системы любят быстрые сайты. Способ 2Этот способ предусматривает использование элемента img, размер которого будет изменяться в зависимости от размера окна браузера. Чтобы растянуть изображение на весь экран, ему необходимо задать min-height и width со значением 100%. А чтобы изображение не сжималось до размера меньшего, чем оригинальный, установим min-width со значением равным ширине картинки.

В случае если ширина окна будет меньше ширины изображения, будет использоваться media query для выравнивания бэкграунда по центру.

img.background { min-height: 100%; min-width: 640px; width: 100%; height: auto; position: fixed; top: 0; left: 0; /* Зависит от размера изображения */ @media screen and (max-width: 640px){ img.bg { left: 50%; margin-left: -320px; } } }

Этот способ работает в:

• Любой версии хороших браузеров (Chrome, Opera, Firefox, Safari)
• IE 9+

Способ 3

Еще один способ заключается в следующем: фиксируем изображение к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.

Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в , который мы делаем в 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.

.jpg" alt="">

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 - если у вас есть свои наработки, хотя здесь должно все одинаково быть. то плиз в комментариях поделитесь с ними.