Question

I was able to get it determined by the browser which is great (link below) but the only problem now is when viewing it on smaller screens it cuts off the content and when refresh the page in google chrome with the browser agent open it cuts off for that too as well.

How can I get the background to fit the browser without cutting off the content.

–link –> How to get an element the same height as browser resolution?

<script type="text/javascript"> 
$(document).ready(function() { 
var height = window.innerHeight; 
$(".bg").css("height", height); }); 
</script>

Answer 1

You can calculate window’s height and width than manipulate to element with these values:

Here is working jsFiddle.

var background = $('.wrapper');
function arrange() {
    var windowH = $(window).height();
    var windowW = $(window).width();
    background.css({'height':windowH+'px','width':windowW+'px','background-size':windowW+'px '+windowH+'px'});
}
arrange(); //for setting sizes on load

$(window).resize(function() {arrange();}); //setting size on window resize