How to scale background image and make it work with browser size

[BopySepay]

What I want is that the background image in my div will scale so that it covers the whole browser. If the image is too small, it will increase, if it is to big it will get smaller. I do not want the image to repeat. See live demo of my whole web design by clicking here.Each section in my parallex design is a . They look like this: \[code\]<section id="start" data-type="background" data-speed="10" style="background: url('http://media.vogue.com/files/2013/01/15/storm-troupers-02_191346273703.jpg') 50% 0 repeat fixed; min-h-margin: 0 auto; height: 1080px;"> bla bla bla </section>\[/code\]Stylesheet\[code\]section { width: 100%; max-width: 1920px; height: 1080px; position: relative; padding-bottom: 40px;}\[/code\]There is also a jquery script for the parallex scrolling. In here there is a script for the background position. This may affect something. \[code\]/** * Parallax Scrolling Tutorial * For NetTuts+ * * Author: Mohiuddin Parekh * http://www.mohi.me * @mohiuddinparekh */$(document).ready(function(){ // Cache the Window object $window = $(window); $('section[data-type="background"]').each(function(){ var $bgobj = $(this); // assigning the object $(window).scroll(function() { // Scroll the background at var speed // the yPos is a negative value because we're scrolling it UP! var yPos = -($window.scrollTop() / $bgobj.data('speed')); // Put together our final background position var coords = '50% '+ yPos + 'px'; // Move the background $bgobj.css({ backgroundPosition: coords });}); // window scroll Ends }); }); /* * Create HTML5 elements for IE's sake */document.createElement("content");document.createElement("section");\[/code\]