How do I set background-image height using jQuery?
Question
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?
3 answers
solution1
4 ACCPTED 2016-11-21 12:49:33
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>
solution2
0 2016-11-21 12:30:06
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">
solution3
-1 2016-11-21 12:47:18
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.