Problème avec un stupide background repeat..

Bonjour,
Je cherche à avoir un background qui change toute les 10 secondes et pour l'instant ça marche. Le seul problème c'est qu'il ce répète pour prendre toute la page alors que je voudrais juste qu'il s'étendent sans ce répéter.
Voici mon code :

<html> 
<head> 
<style type="text/css"> 
#header { 
background-repeat: no-repeat; 
width:100%;
height:100%;
} 
</style >
<script  src = "http://code.jquery.com/jquery-1.11.0.min.js" ></script> 
<script> 
$ ( document ). ready ( function (){ 
var header = $ ( 'body' );

var backgrounds =  new  Array ( 
    'url(image1.jpg)' 
  ,  'url(image2.jpg)' 
  ,  'url(image1.jpg)' 
  ,  'url(image2.jpg)' 
);

var current =  0 ;

function nextBackground ()  { 
    current ++; 
    current = current % backgrounds . length ; 
    header . css ( 'background-image' , backgrounds [ current ]); 
} 
setInterval ( nextBackground ,  10000 );

header . css ( 'background-image' , backgrounds [ 0 ]); 
}); 
</script> 
</head> 
<body> 
<div id="header">,</div> 
</body> 
</html>

Cordialement,