Css во весь экран jquery

Фон во весь экран. jQuery+CSS

Ниже я покажу 2 разные техники как получить фоновое изображение, тянущееся на всю страницу, в независимости от разрешения экрана:

Требования

* Заполняет всю страницу с изображением, без пробелов
* Сохраняет пропорции изображения
* Нет полосы прокрутки
* Кросс-браузерность
* Не Flash

Способ №1

картинка находится внутри нескольких «оболочек»:

* < margin: 0; padding: 0; >html, body, #bg, #bg table, #bg td < height:100%; width:100%; overflow:hidden; >#bg < position: fixed; >#bg div < height:200%; left:-50%; position:absolute; top:-50%; width:200%; >#bg td < text-align:center; vertical-align:middle; >#bg img

Чтобы разместить контент, добавим ещё один блок:

JAVASRCIPT ФИКС

Для IE6 может потребоваться добавить немного MooTools для фиксации

В FF по умолчанию Focus находится на body-элементе при загрузуке страницы. При нажатии пробела могут вызникнуть некрасивые белые полосы внизу страницы.
Чтобы этого избежать, добавьте следующий jQuery-код для скрытого элемента:

$(function()< $(".box").prepend(''); $("#focus-stealer").focus(); >);

Баги

в Safari 4 и Chrome, min-height не подгоняется

Демо
Скачать файлы

Способ №2

Это решение более лёгкое, без лишней нагруженности кодом. Но и недостатки есть — фон не центрируется в IE7, не работает вообще в IE6, и не всегда пропорциональна.
Но это погрешность от простоты кода. Картинка находится просто в классе img.bg со свойством inline. Итак:

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) < img.bg < left: 50%; margin-left: -512px; >> div#content < /* This is the only important rule */ /* We need our content to show up on top of the background */ position: relative; /* These have no effect on the functionality */ width: 500px; margin: 0 auto; background: #fff; padding: 20px; font-family: helvetica, arial, sans-serif; font-size: 10pt; line-height: 16pt; -moz-box-shadow: #000 4px 4px 10px; -webkit-box-shadow: #000 4px 4px 10px; >body < /* These rules have no effect on the functionality */ /* They are for styling only */ margin: 0; padding: 20px 0 0 0; >

Источник

Растянуть background на весь экран с помощью css, jquery, php

Нашей целью будет реализовать фон (background) сайта, который будет покрывать все рабочее пространство окна браузера. Мы будем делать это с помощью разных техник используя CSS3, чистый CSS, jQuery, PHP.

Давайте определим, что именно мы хотим получить:

Полная заливка окна картинкой, без пробелов.

Растягивание фоновой картинки, насколько это нужно.

Соответствие пропорций картинки.

Картинка должна находиться в центре.

Это должно быть максимально кроссбраузерно.

И без всяких махинаций с flash.

CSS3 метод

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

Кроссбраузерность:

Opera 10+ (Opera 9.5 поддерживает background-size но не поддерживает ключевых слов)

Также есть вариант решения для IE, только необходимо тестировать. Некоторые вебмастера говорят, что могут возникнуть проблемы из ссылками и скроллингом.

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

Растянуть background на чистом CSS

Сделать background на весь экран с помощью чистого CSS кода, можно двумя методами. Не исключение что существуют и другие.

1 – Метод

Здесь мы будем использовать элемент img, который будет растянут на все окно, и будет выглядеть одинаково во всех браузерах. Мы установим min-height, который будет заполнять окно браузера по вертикали. Также установим width на 100%, который будет заполнять окно по горизонтали. Мы также установим min-width картинки, таким образом, фон никогда не будет меньше, нежели мы установим.

Особо хитрая часть кода, это использование медиа запроса, для предотвращения бага, когда окно браузера будет меньше, нежели картинка фона. А также, комбинированное использование отступа с процентным left. Это позволяет держать background в центре, несмотря ни на что.

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 / Chrome / Opera / Firefox

IE 6: По крайней мере background остается фиксированным

IE 7/8: Множество работ не центрируются на малых размерах, но заполняет экран лучшим образом

2 – Метод

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

Хотя, этот код не центрирует background image. Поэтому, сейчас мы это исправим… Мы можем фиксировать картинку с помощью взятия ее в div.

Кроссбраузерность:

Safari / Chrome / Firefox (не тестировалось на более древних версиях)

Opera (любые версии) и IE отображают одинаково (плохо позиционируют, не пойму почему)

Растянуть background с помощью jQuery

Эта идея появилась немного ранее (как альтернатива CSS методу). Если мы будем знать пропорции и размер картинки, мы сможем растянуть background на CSS. Если картинка меньше окна браузера, мы изменим width на 100% для картинки. Если больше, мы можем установить только height 100% и знать, что картинка заполнит все как по ширине, так и по высоте.

Мы можем получить доступ к нужным данным с помощью JavaScript. Как и все, я использую фреймверк 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"); >);

Здесь не реализовано центрирование, но вы с легкостью можете сделать это.

Кроссбраузерность:

И все другие популярные браузеры

Растягиваем background с помощью PHP

Собственно, PHP мы можем использовать для одной цели: обработки изображения с помощью GD библиотеки. Ранее я рассказывал о том, как сделать скрипт превью картинок. В этом случае его можно использовать для изменения размера изображения на лету. Но возникает проблема, изображение будет генерироваться при каждом обращении к сайту. Для большого проекта это слишком ресурсоемко. Лучше будет сделать готовые заготовки изображений, соответственно самым популярным разрешениям экранов (1024 x 1280, 1280 x 800…), используя фотошоп это не сложно. В случае, если разрешение экрана будет другим, это единичные случаи, мы подключим скрипт автоматического изменения размера. Он подключается следующим образом:

Наслаждайтесь!

Это все известные мне способы, как растянуть background на весь экран. Если вы делаете это иначе, будьте добры опишите это в комментариях. Буду рад узнать о новых вариантах растягивания background с помощью css и других техник. Творческих вам успехов!

Источник

Полноэкранное изображение на JQuery

Уважаемые пользователи! Мы благодарим Вас за то, что Вам интересен нашен контент, поэтому с каждым днем хотим становиться все лучше и лучше!

Всех приветствую!) Давненько я не выпускал новых материалов, так как отдыхал, занимался своими делами по работе, и наконец-то освободилось немного времени, чтобы вложить в любимый проект) Для Вас сегодня я подготовил не очень сложный, но возможно полезный скрипт, который поможет Вам при просмотре полноэкранного изображения, выполненного на JQuery. То есть, по сути, у нас есть фоновое изображение, которое постоянно растянуто на весь экран в зависимости от его положения. Если Вы подумали, что это адаптивность. Увы, — Вы ошибаетесь! Нет, — Это просто изображение, которое растянуто на весь экран монитора или мобильного устройства. Для начала стоит перейти на сайт, указанный в источниках материала, где можно ознакомится с данным скриптом фонового изображения на JQuery. Сразу обращаю ваше внимание, что для примера я сделал абсолютно все также. Для чего? — Чтобы помочь Вам просто предоставить материал для ознакомления, тем более в русско-язычном контенте.

Не устаю повторять, все по стандарту) Подключаем файл стилей demo.css, библиотеку JQuery, и собственно наш скрипт image.js.

Теперь, можем перейти к HTML коду, в котором мы по стандарту подключаем div блок с идентификатором content, который будет иметь обязательные свойства CSS. Далее вставляем наше изображение, в моем случае это картинка image.jpg, которая лежит в папке img, задаем ширину и высоту, а также обязательно прописываем идентификатор image.

Тут как бы все просто, есть определенные свойства стилей, которые будут правильно фиксировать фоновое изображение. Из обязательных свойств выделил бы position: fixed и overflow: hidden. Последнее свойство скрывает прокрутку у изображения.

Последнее, что нам осталось, так это как раз таки заняться скриптом, который будет контролировать растягивание самого изображения. За данное действие отвечает скрипт image.js. Создаем функцию FullScreenBackground и прописываем ей переменные по высоте и по ширине. После этого определяем CSS свойства и делим значения, получая определенные равные промежутки по диагонали, по высоте и по ширине.

function FullScreenBackground(theItem) < var winWidth=$(window).width(); var winHeight=$(window).height(); var imageWidth=$(theItem).width(); var imageHeight=$(theItem).height(); var picHeight = imageHeight / imageWidth; var picWidth = imageWidth / imageHeight; if ((winHeight / winWidth) < picHeight) < $(theItem).css("width",winWidth); $(theItem).css("height",picHeight*winWidth); >else < $(theItem).css("height",winHeight); $(theItem).css("width",picWidth*winHeight); >; $(theItem).css("margin-left",winWidth / 2 - $(theItem).width() / 2); $(theItem).css("margin-top",winHeight / 2 - $(theItem).height() / 2); >

Для определения функций скрипта, мы прописываем в файле index.php, или можно в принципе его тоже вынести в отдельный файл, событие загрузки страницы window.onload функции FullScreenBackground с идентификатором image, а также событие $(window).resize, которое изменяет размеры window и после вызываем функцию FullScreenBackground с идентификатором image. То есть простыми словами, мы вызываем наш скрипт image.js, оптимизируем его и подгоняем под размер окна браузера фоновое изображение.

Спасибо всем большое за внимание, сегодня мы с Вами рассмотрели полноэкранное изображение на JQuery, возможно оно Вам пригодится для реализации в своих проектах. Хотелось бы у Вас спросить, интересует ли тематика, связанная не просто с самописными скриптами, а к примеру с плагинами на WordPress или какой-то еще другой CMS? Если да, то пишите в комментариях, буду очень рад, предоставить что то полезное и нужное! Еще раз, спасибо за внимание!)

Источник