CODEWITHSUNDEEP
cssbackground-image
Alaksandar Jesus Gene
Alaksandar Jesus Gene

Reputation: 6883

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.

Upvotes: 0

Views: 25818

Answers (4)

Nick
Nick

Reputation: 3281

http://jsfiddle.net/fynbc5uv/
You said you didn't want to set height, the only workaround for this is setting the background-image on the body. CSS:

body{height:100%;
   background: url(http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Upvotes: 0

Nick
Nick

Reputation: 14283

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%

Upvotes: 2

Rasel
Rasel

Reputation: 5734

use background-size property of css

background-size: 100% 100%;

Upvotes: 0

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

console.log($('.home').height()); is returning null as you have not set height attribute for home div.

set height attribute and then you can use it or do Nick told background-size: auto 100%;

Upvotes: 1

Related Questions