CODEWITHSUNDEEP
css
pricetyler
pricetyler

Reputation: 11

Stretch to fit background in CSS

I am trying to stretch an image to fit the ENTIRE background, so far I have tried this code but it just repeats vertically which I don't want.

body {
    margin: 0;
    border: 0;
    background-image: url(/images/bg.jpg);
    background-size: cover;
    background-position: center;
}

Upvotes: 1

Views: 46

Answers (2)

jojo
jojo

Reputation: 1145

Use this, also back sure to enclose your path in quotes '':

background-repeat: no-repeat

For future reference, you can combine most of the background properties like so:

Model: 

background: <background-color> | <background-image> | <background-repeat> | <background-attachment> | <background-position>

Your CSS:

body {
    margin: 0;
    border: 0;
    background-size: cover;
    background: url('/images/bg.jpg') no-repeat fixed center;
}

More info: http://www.htmlgoodies.com/beyond/css/article.php/3868361

Upvotes: 0

Michael Harvey
Michael Harvey

Reputation: 228

Try using

background-image: url("/images/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;

which can be abbreviated to

background: url("/images/bg.jpg") no-repeat fixed center;
background-size: cover;

Upvotes: 2

Related Questions