Главная Новости

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


Опубликовано: 02.09.2018

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

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

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

Создайте файл « 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" type="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 происходит вычисление размера экрана у пользователя, который открыл ваш сайт. Вычисление размера экрана нужно для нормального показа фонового изображения.

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

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

Последние новости категории:

Похожие статьи

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

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

Метки: эффекты для сайта

rss