CODEWITHSUNDEEP
htmlcssbackground-imagebackground-size
Alex Nikolsky
Alex Nikolsky

Reputation: 2179

Background image doesn't fit in the screen width

I've set my background image (1280 x 853) and that doesn't suit well the screen.

How can I fix that?

body {
  background-image: url("/assets/pic.jpg");
}

Upvotes: 0

Views: 1021

Answers (3)

dSumner.1289
dSumner.1289

Reputation: 722

In addition to background-size: cover, you can use the background-position property to place your image where you want it to be, as sometimes background-size:cover will cut off areas that you wanted to be visible. Using percentage values in the background-position property will allow you to fine tune this more.

Upvotes: 1

MohitC
MohitC

Reputation: 4821

body {
    background-image:  url("/assets/pic.jpg");
    background-size:   cover;   
    background-repeat: no-repeat;
}

Upvotes: 3

Platte Gruber
Platte Gruber

Reputation: 3213

You can use:

body {
    background-image: url("/assets/pic.jpg");
    background-size: cover;
}

And optionally set background-repeat: no-repeat to prevent to image from repeating.

Here's a example.

Upvotes: 4

Related Questions