CODEWITHSUNDEEP
css
Himanshu Yadav
Himanshu Yadav

Reputation: 13585

CSS: Full Size background image

Trying to get full size background image with:

html {
    height: 100%;
    background:url('../img/bg.jpg') no-repeat center center fixed;
    background-size: cover;
}

It's showing the background image with correct width but height gets stretched. I tried various options like

html {
    background:url('../img/bg.jpg') no-repeat center center fixed;
    background-size: 100% auto;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;                              
}

removing height: 100%

but none of them worked.

Upvotes: 17

Views: 57699

Answers (6)

Abed Putra
Abed Putra

Reputation: 1215

I have same problem I use this CSS on body

background: url(image.jpg);
    background-color: rgba(0, 0, 0, 0);
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto auto;
background-color: #0a769d;
height: 100%;
min-height: 100%;
max-height: 100%;
width: 100%;
background-size: 100% 100%;
background-position: center;
max-width: 100%;
min-width: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;

Upvotes: 1

Behnam
Behnam

Reputation: 6459

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: 3

squashriddle
squashriddle

Reputation: 176

You should use the body as the selector and not html, this will cause issues with your markup. Your code is below:

html {
    height: 100%;
    background:url('../img/bg.jpg') no-repeat center center fixed;
    background-size: cover;
}

I would try something like:

body {
    background:url('../img/bg.jpg') no-repeat 50% 0 fixed;
    margin: 0 auto;
}

You should not have to specify the dimensions for the image.

Upvotes: 0

rentageekmom
rentageekmom

Reputation: 301

A better solution might be to use a lightweight jQuery plugin to dynamically size the background to the browser site. One I really like is backstretch.js. They're incredibly simple to implement.

Upvotes: 2

Gareth Cornish
Gareth Cornish

Reputation: 4356

Your screen is obviously a different shape to your image. This is not uncommon, and you should always cater to this case even if your screen is the same shape (aspect ratio), because other people's screens will not always be. To deal with this, you have only one of three options:

  • You can choose to completely cover the screen with your image, but not distort the image. In this case, you will need to cope with the fact that edges of your image will be cut off. For this case, use: background-size: cover
  • You can choose to make sure the entire image is visible, and not distorted. In this case, you'll need to cop with the fact that some of the background will not be covered by your image. The best way to deal with this is to give the page a solid background, and design your image to fade into the solid (although this is not always possible). For this case, use: background-size: contain
  • You can choose to cover the entire screen with your background, and distort it to fit. For this case, use: background-size: 100% 100%

Upvotes: 36

vGichar
vGichar

Reputation: 81

try with contain instead of cover and then center it:

background-size: contain;
background-position: center;

Upvotes: 7

Related Questions