BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Эффекты для сайта » Как сделать резиновый фон для сайта на jQuery

Как сделать резиновый фон для сайта на jQuery

2013-09-21 / Вр:21:27 / просмотров: 6133

Всем привет!!!

Эта статья будет интересна всем тем, кто создает сайты. Я думаю, вы не раз видели на различных веб-сайтах такой эффект, когда при разном расширении экрана фон сайта автоматически красиво растягивается по ширине и высоте монитора. Если же вы с подобным эффектом не сталкивались, рекомендую посмотреть готовый вариант, и попробовать на нем уменьшить или увеличить масштаб в самом браузере.

Как сделать резиновый фон для сайта на jQuery

Итак, для начала найдите качественное изображение для фона и поместите его в корень сайта.

Как сделать резиновый фон для сайта на jQuery

Создайте файл «index.html» и установите вот такой код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function() {

var bgImage = $('#background-image');

 function resizeImg() {
 var imgwidth = bgImage.width(),
 imgheight = bgImage.height(),
 winwidth = $(window).width(),
 winheight = $(window).height(),
 widthratio = winwidth / imgwidth,
 heightratio = winheight / imgheight,
 widthdiff = heightratio * imgwidth,
 heightdiff = widthratio * imgheight;

 if(heightdiff>winheight) {
 bgImage.css({
 width: winwidth+'px',
 height: heightdiff+'px'
 });
 } else {
 bgImage.css({
 width: widthdiff+'px',
 height: winheight+'px'
 });
 }

 $("#background-image").show();

 }
 resizeImg();
 $(window).resize(function() {
 resizeImg();
 });

});
</script>
<style>
#background-image{
 position:absolute;
 top:0;
 left:0;
 z-index:-10;
 overflow: hidden;
 width: 100%;
 display:none;
 }

.content{
 height:500px;}
</style>
</head>
<body>
<img src="nature.jpg" id="background-image"/>
</body>
</html>

Строка №61 - это изображение, к которому присвоено id «background-image», оно и будет служить фоном.

 <img src="fon.jpg" id="background-image"/> 

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

Конечно, можно не заморачиваться, и просто скачать исходник :shock:.

Скачать новогоднее украшение для сайта.Эффект новогоднее украшение для сайта

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

5 Ответов на комментарий - Как сделать резиновый фон для сайта на jQuery

  1. Тамара Полякова

    Хороший и полезный у тебя сайт, Степан! Невозможно пропустить ни одной статьи! Все они интересны и важны. Но к сожалению я плохо разбираюсь в html кодах, и даже если что-то хорошо поняла, то боюсь вносить изменения на сайте. Мне еще нужно многому учиться. Спасибо за полезную информацию в статье. Удачи тебе и всего доброго.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Спасибо, Тамара.

    Ответить

  2. Тимофей

    Спасибо очень полезная статья. Вы мне очень сильно помогли, применю Вашу статью для своего сайта

    Ответить

  3. Очень полезная статья. Смущает только подключение дополнительного скрипта. Можно в прицепе обойтись и без скрипта вот таким кодом

    body {
    background: url("images/Ваша картинка.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    Фон будет зафиксирован от прокрутки, то есть прокручивая страницу он будет оставаться на месте и принимать размер
    экрана. Думаю для фона с картинкой фиксированное положение самое то, так как при прокрутке он может повторятся или если стоит просто no-repeat то снизу при прокрутке будет белый фон.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Александр, Ваш способ на CSS мне понравился. Спасибо за полезный комментарий!

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки:

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 671
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3683