E.Owen E.Owen - 2 months ago 20
CSS Question

How do I set background-image height using jQuery?

I would like my background image to fill the height of the window on which it is being viewed. Obviously I don't know this value since it is variable. I know it is possible to do what I want using jQuery but after searching SO and google for about an hour without finding an answer to my question, I gave up and decided to ask instead.

I have the background image set to cover it's containing

using css.

How do I achieve my desired outcome?


Using Jquery background image according to window height See the snippet


$(document).ready(function () {
     var winHeight = $(window).height();
     $('.window-height-bg').css('height', winHeight + 'px');

    .window-height-bg {
       background:red url(http://i67.tinypic.com/2mqj1iq.jpg) no-repeat;
       background-size:100% 100%;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="window-height-bg">