Alaksandar Jesus Gene Alaksandar Jesus Gene - 1 month ago 10
CSS Question

background image to full height and width using css or jquery

I want the background image for my home div only which is visible only for desktops and tablets(landscape). I could adjust them with CSS media query.

But my background image is not fitting to full height.

here is my pluner code. http://plnkr.co/edit/HzlZdqvprkhzO1edqNKK?p=preview

my jquery code

$(document).ready(function(){
console.log($('.home').height());
});


is also returning null.

What is the best way to solve this.

Answer

addi this code to youre image, and you wil l have your result without jquery:

background: url(http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg) no-repeat center center fixed;
background-size: cover;
height: 400px;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;

the secret is using background-size: cover and then set the background as fixed with height and width 100%