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

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

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

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

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

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

Как сделать резиновый фон для сайта на 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: .