Нашел вот такой красивый фон: http://www.rudebox.org.ua/beautiful-animated-background-site/ Решил скачать и попробовать. Но проблема в том, что фон не становится фоном, а просто отображается как блок, весь контент при этом съезжает вниз. Что можно сделать?
Вот код страницы:
var refreshDuration = 10000;
var refreshTimeout;
var numPointsX;
var numPointsY;
var unitWidth;
var unitHeight;
var points;
function onLoad()
{
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width',window.innerWidth);
svg.setAttribute('height',window.innerHeight);
document.querySelector('#bg').appendChild(svg);
var unitSize = (window.innerWidth+window.innerHeight)/20;
numPointsX = Math.ceil(window.innerWidth/unitSize)+1;
numPointsY = Math.ceil(window.innerHeight/unitSize)+1;
unitWidth = Math.ceil(window.innerWidth/(numPointsX-1));
unitHeight = Math.ceil(window.innerHeight/(numPointsY-1));
points = [];
for(var y = 0; y < numPointsY; y++) {
for(var x = 0; x < numPointsX; x++) {
points.push({x:unitWidth*x, y:unitHeight*y, originX:unitWidth*x, originY:unitHeight*y});
}
}
randomize();
for(var i = 0; i < points.length; i++) {
if(points[i].originX != unitWidth*(numPointsX-1) && points[i].originY != unitHeight*(numPointsY-1)) {
var topLeftX = points[i].x;
var topLeftY = points[i].y;
var topRightX = points[i+1].x;
var topRightY = points[i+1].y;
var bottomLeftX = points[i+numPointsX].x;
var bottomLeftY = points[i+numPointsX].y;
var bottomRightX = points[i+numPointsX+1].x;
var bottomRightY = points[i+numPointsX+1].y;
var rando = Math.floor(Math.random()*2);
for(var n = 0; n < 2; n++) {
var polygon = document.createElementNS(svg.namespaceURI, 'polygon');
if(rando==0) {
if(n==0) {
polygon.point1 = i;
polygon.point2 = i+numPointsX;
polygon.point3 = i+numPointsX+1;
polygon.setAttribute('points',topLeftX+','+topLeftY+' '+bottomLeftX+','+bottomLeftY+' '+bottomRightX+','+bottomRightY);
} else if(n==1) {
polygon.point1 = i;
polygon.point2 = i+1;
polygon.point3 = i+numPointsX+1;
polygon.setAttribute('points',topLeftX+','+topLeftY+' '+topRightX+','+topRightY+' '+bottomRightX+','+bottomRightY);
}
} else if(rando==1) {
if(n==0) {
polygon.point1 = i;
polygon.point2 = i+numPointsX;
polygon.point3 = i+1;
polygon.setAttribute('points',topLeftX+','+topLeftY+' '+bottomLeftX+','+bottomLeftY+' '+topRightX+','+topRightY);
} else if(n==1) {
polygon.point1 = i+numPointsX;
polygon.point2 = i+1;
polygon.point3 = i+numPointsX+1;
polygon.setAttribute('points',bottomLeftX+','+bottomLeftY+' '+topRightX+','+topRightY+' '+bottomRightX+','+bottomRightY);
}
}
polygon.setAttribute('fill','rgba(0,0,0,'+(Math.random()/3)+')');
var animate = document.createElementNS('http://www.w3.org/2000/svg','animate');
animate.setAttribute('fill','freeze');
animate.setAttribute('attributeName','points');
animate.setAttribute('dur',refreshDuration+'ms');
animate.setAttribute('calcMode','linear');
polygon.appendChild(animate);
svg.appendChild(polygon);
}
}
}
refresh();
}
function randomize() {
for(var i = 0; i < points.length; i++) {
if(points[i].originX != 0 && points[i].originX != unitWidth*(numPointsX-1)) {
points[i].x = points[i].originX + Math.random()*unitWidth-unitWidth/2;
}
if(points[i].originY != 0 && points[i].originY != unitHeight*(numPointsY-1)) {
points[i].y = points[i].originY + Math.random()*unitHeight-unitHeight/2;
}
}
}
function refresh() {
randomize();
for(var i = 0; i < document.querySelector('#bg svg').childNodes.length; i++) {
var polygon = document.querySelector('#bg svg').childNodes[i];
var animate = polygon.childNodes[0];
if(animate.getAttribute('to')) {
animate.setAttribute('from',animate.getAttribute('to'));
}
animate.setAttribute('to',points[polygon.point1].x+','+points[polygon.point1].y+' '+points[polygon.point2].x+','+points[polygon.point2].y+' '+points[polygon.point3].x+','+points[polygon.point3].y);
animate.beginElement();
}
refreshTimeout = setTimeout(function() {refresh();}, refreshDuration);
}
function onResize() {
document.querySelector('#bg svg').remove();
clearTimeout(refreshTimeout);
onLoad();
}
window.onload = onLoad;
window.onresize = onResize;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ваш сайт</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/background.js"></script>
</head>
<body>
<div id="bg"></div>
<header>
<nav>
<ul>
<li>Ваше меню</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Заголовок статьи</h2>
<p>Опубликовано <time datetime="2014-01-30T16:31:24+03:00">30 января 2014</time> <a href="#">Автор</a> - <a href="#comments">6 комментариев</a></p>
</header>
<p>Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться.</p>
</article>
<article>
<header>
<h2>Заголовок статьи</h2>
<p>Опубликовано <time datetime="2014-01-30T16:31:24+03:00">30 января 2014</time> <a href="#">Автор</a> - <a href="#comments">6 комментариев</a></p>
</header>
<p>Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию.</p>
</article>
</section>
<aside>
<h2>Об авторе</h2>
<p>Нет никого, кто любил бы боль саму по себе, кто искал бы её и кто хотел бы иметь её просто потому, что это боль..</p>
</aside>
<footer>
<p>Copyright 2014 Ваш сайт</p>
</footer>
</body>
</html>
bg
сделан просто блоком, а не фоном? Для примера сделайте его с абсолютным позиционированием