CODEWITHSUNDEEP
cssimagebackground
hangee
hangee

Reputation: 739

How to show full height background image?

I have a photo type (not landscape) background image with 979px width by 1200px height. I would like to set it to float left and show 100% full image height fixed, without the need to scroll up/down (regardless of content length).

This is my CSS code, but it is not working:

img, media {
    max-width: 100%;
}

body {
    background-color: white;
    background-image: url('../images/bg-image.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

Upvotes: 60

Views: 258669

Answers (5)

Alijon Jumanazarov
Alijon Jumanazarov

Reputation: 350

body{
    background-image: url("your_image_src");
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    height: 100vh;
}

it can cover full height and width as well

Upvotes: 10

manzim
manzim

Reputation: 29

This worked for me (though it's for reactjs & tachyons used as inline CSS)

<div className="pa2 cf vh-100-ns" style={{backgroundImage: `url(${a6})`}}> 
........
</div>

This takes in css as height: 100vh

Upvotes: 0

him
him

Reputation: 3575

 html, body {
    height:100%;
}

body { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Upvotes: 5

Kevin Lynch
Kevin Lynch

Reputation: 24703

You can do it with the code you have, you just need to ensure that html and body are set to 100% height.

Demo: http://jsfiddle.net/kevinPHPkevin/a7eGN/

html, body {
    height:100%;
} 

body {
    background-color: white;
    background-image: url('http://www.canvaz.com/portrait/charcoal-1.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

Upvotes: 105

Riskbreaker
Riskbreaker

Reputation: 4791

CSS can do that with background-size: cover;

But to be more detailed and support more browsers...

Use aspect ratio like this:

 aspectRatio      = $bg.width() / $bg.height();

FIDDLE

Upvotes: 6

Related Questions