CODEWITHSUNDEEP
jquerycss
E.Owen
E.Owen

Reputation: 825

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 <div> using css.

How do I achieve my desired outcome?

Upvotes: 2

Views: 4617

Answers (3)

Ayatullah Rahmani
Ayatullah Rahmani

Reputation: 932

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');
});
   

 body{
      margin:0px;
     }
    .window-height-bg {
       width:100%;
       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">
</div>

Upvotes: 3

Anurag_Soni
Anurag_Soni

Reputation: 542

I think this below code will help you

Please check the link for more detail Link 

<body  background="w3s.png">
<img style=" display: inline-block;
    max-width: 100%;
    vertical-align: middle;" src="http://ssmstorage.blob.core.windows.net/thumbnail/thumbnail_6e9579e9-ec17-4fce-a8cb-6421322b5460.jpg" alt="Smiley face" width="50%" height="50%">
<h1>dfksdhfsdfklsdfhsdklfhlskfsdlfjklsf</h1>
<img style=" display: inline-block;
    max-width: 100%;
    vertical-align: middle;" src="http://ssmstorage.blob.core.windows.net/thumbnail/thumbnail_6e9579e9-ec17-4fce-a8cb-6421322b5460.jpg" alt="Smiley face" width="50%" height="50%">
<h1>dfksdhfsdfklsdfhsdklfhlskfsdlfjklsf</h1>
<img style=" display: inline-block;
    max-width: 100%;
    vertical-align: middle;" src="http://ssmstorage.blob.core.windows.net/thumbnail/thumbnail_6e9579e9-ec17-4fce-a8cb-6421322b5460.jpg" alt="Smiley face" width="50%" height="50%">
</body>

Upvotes: -1

Anurag_Soni
Anurag_Soni

Reputation: 542

Hi you can achieve it by using max-width attribute in image tag or on div or by setting the image to body tag 

max-width: 100%;

or like this 

<body background="http://ssmstorage.blob.core.windows.net/thumbnail/thumbnail_6e9579e9-ec17-4fce-a8cb-6421322b5460.jpg">

Upvotes: 0

Related Questions