BloGGood.ru

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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" ENGINE="text/css" />
<script type="text/javascript" src="https://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. Тимофей

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

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

    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 то снизу при прокрутке будет белый фон.

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

    Александр, Ваш способ на 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]

Метки:

Мои цели на 2018-2019:

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

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

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

4). Довести количество статей до 800

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

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

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

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573