Se eu entendi bem, você quer um loop de background, bom tem uma função em CSS3 que dá para fazer isso por você, mas você pode esta imaginando como isso pode me ajudar? Bom você pode fazer com JavaScript é adicionar e remover class, você vai precisar de 3 itens: HTM , CSS e JAVA SCRIP;
HTML
<div id="alpha" class="alpha">a</div>
CSS3
/*Alpha é uma class de cor inicial*/
.alpha{
width: 500px;
height: 500px;
background: #09f;
}
/*Beta é a class que faz a animação*/
/*Ela sera adicionada e removida o tempo todo*/
.beta{
/*Nome da animação*/
animation-name: cor;
/*Tempo da animação 4s = 4 segundo / 0.5s = 0,50 segundos*/
animation-duration: 4s;
}
/*Chama animação caso tenha class*/
@keyframes cor{
0% {background: #09f;}
50% {background: #f00;}
100% {background: #09f;}
}
SCRIPT
//Define o elemento como uma variavel Global
var elemento = document.getElementById("alpha");
//Função principal
function funcao(){
//Loop por 5s setInterval(function(){}, 5000);
setInterval(function(){
//Linha abaixo é bom para verificar no console, F12 do teclado
console.log("time");
//Remove a class Beta
elemento.classList.remove("beta");
//Da um tempo de 1s para adicionar a Class Beta novamente
setTimeout(adicionar, 1000);
}, 5000);
}
//Função que adiciona a class
function adicionar(){
elemento.classList.add("beta");
}
//Chama a função principal
window.onload = funcao();
Vale lembrar que o tem que ser o último conteúdo, porque se não ele tem chance de não encontrar a div no documento, dá para ter uma praticidade mair usando o jQuery api e algumas outras de controle de interface.
Boa sorte e bom estudos com seu desejo =D