Fit website background image to screen size

Question

I'm just starting on a website and I already encounter a small problem where I can't find a specific solution to.

I wanted to make my website background fit any screen size in width, height does not matter.

This is the link to my image:

    ../IMAGES/background.jpg

EDIT

I have no idea what's wrong, but for some reason the body doesn't even want to get the background image. It just displays a plain white background.

body
{background-image:url(../IMAGES/background.jpg);}

There are so many question like yours. Please use the search function! And the image path is your local path. — Michael Schmidt, Nov 12 '13 at 09:15
possible duplicate of [Stretch and scale a CSS image in the background - with CSS only](http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only) — Oliver Matthews, Nov 12 '13 at 09:15

score 83 · Accepted Answer · answered Nov 12 '13 at 09:25

83

you can do this with this plugin http://dev.andreaseberhard.de/jquery/superbgimage/

or

   background-image:url(../IMAGES/background.jpg);

   background-repeat:no-repeat;

   background-size:cover;

with no need the prefixes of browsers. it's all ready suporterd in both of browers

answered Nov 12 '13 at 09:25

Victorino

1,623
11
22

This solution doesn't work in case of mobile screens https://stackoverflow.com/questions/72852187/background-image-is-not-occupying-full-screen-height-on-mobile – vikramvi Jul 04 '22 at 05:41

score 27 · Answer 2 · answered Nov 12 '13 at 09:18

27

Try this ,

 background: url(../IMAGES/background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

For more information , follow this Perfect Full Page Background Image !!

answered Nov 12 '13 at 09:18

zey

5,939
14
56
110

It's a little bit old thread, but It actually worked good for me, but be sure to place this CSS in the html {} and NOT in the body {}. – Marco Oct 18 '15 at 18:24
This is perfect for all kinds of devices. Keeping image center performs the magic – Yogi Mar 10 '17 at 07:51

score 20 · Answer 3 · answered Jun 20 '16 at 09:52

20

You can try with

.appBackground {
    position: relative;
    background-image: url(".../img/background.jpg");
    background-repeat:no-repeat;
    background-size:100% 100vh;
}

works for me :)

answered Jun 20 '16 at 09:52

Carlos Jaraiz

201
2
2

2

This one is the only correct solution. The key to success is "100vh". – Farshad Mohajeri Jun 21 '18 at 07:42
finally an answer that doesn't just say "use background-size: cover", this works. – Stef Nov 20 '21 at 19:46

score 5 · Answer 4 · answered Dec 05 '18 at 18:54

5

Try this, I hope it will help:

position: fixed;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('background.jpg');

answered Dec 05 '18 at 18:54

Sara Popa

153
2
6

score 3 · Answer 5 · answered Mar 24 '21 at 08:58

3

body{
    background-image: url(".../img/background.jpg");
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
}

answered Mar 24 '21 at 08:58

coderX

183
1
14

1

Please don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Ran Marciano Mar 24 '21 at 19:36

score 2 · Answer 6 · edited Apr 23 '16 at 08:00

2

Try this:

background: url(../IMAGES/background.jpg) no-repeat;
background-size: auto auto;

edited Apr 23 '16 at 08:00

Jai Chauhan

4,035
3
36
62

answered Nov 12 '13 at 09:52

Rohit

657
6
25

pacifist · Answer 7 · 2016-11-23T04:13:15.490

.. I found the above solutions didn't work for me (on current versions of firefox and safari at least).

In my case I'm actually trying to do it with an img tag, not background-image, though it should also work for background-image if you use z-height:

<img  src='$url' style='position:absolute; top,left:0px; width,max-height:100%; border:0;' >

This scales the image to be 'fullscreen' (probably breaking the aspect ratio) which was what I wanted to do but had a hard-time finding.

It may also work for background-image though I gave up on trying that kind of solution after cover/contain didn't work for me.

I found contain behaviour didn't seem to match the documentation I could find anywhere - I understood the documentation to say contain should make the largest dimension get contained within the screen (maintained aspect). I found contain always made my image tiny (original image was large).

Contain was with some hacks closer to what I wanted than cover, which seems to be that the aspect is maintained but image is scaled to make the smallest-dimension match the screen - i.e. always make the image as big as it can until one of the dimensions would go offscreen...

I tried a bunch of different things, starting over included, but found height was essentially always ignored and would overflow. (I've been trying to scale a non-widescreen image to be fullscreen on both, broken-aspect is ok for me). Basically, the above is what worked for me, hope it helps someone.

score 2 · Answer 8 · answered Jul 05 '20 at 04:00

2

This worked for me:

body {
  background-image:url(../IMAGES/background.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

answered Jul 05 '20 at 04:00

code001

21
1

2

Welcome to Stack Overflow. When answering a six year old question with an accepted answer and twelve existing answers it is very important to point out what new aspect of the question your answer addresses. Code only answers can generally be improved by explaining how and why they work. – Jason Aller Jul 05 '20 at 04:41

score 0 · Answer 9 · answered Jun 30 '17 at 08:52

0

Try this,

.appBg {

background-image: url(".../img/background.jpg");
background-repeat:no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto ;
}

This one works for me

answered Jun 30 '17 at 08:52

Udara Herath

805
2
18
37

score 0 · Answer 10 · answered Jul 27 '18 at 12:58

Background image fix to screens with browser compatibility css

.full-screen {
    height: 100%;
    width: 100%;
    background-image: url(../images/banner.jpg);
    background-size: cover;
    background-position: center;
    //for browser compatibility
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
}

score 0 · Answer 11 · edited Apr 01 '19 at 20:56

Although there are answers to this your questions but because I was once a victim of this problem and after few search online i was unable to solve it but my fellow hub mate helped me and i feel i should share. Examples explained below.

Folders: web-projects/project1/imgs-journey.png

background-image:url(../imgs/journey.png);
background-repeat:no-repeat;
background-size:cover;

My major points is the dots there if you noticed my journey.png is located inside an imgs folder of another folder so you're to add the dot according to the numbers folders where your image is stored. In my case my journey.png image is saved in two folders that's why two dot is used, so i think this may be the problem of background images not showing sometimes in our codes. Thanks.

score 0 · Answer 12 · answered Jun 27 '20 at 05:43

0

width: 100%;
background-image: url("images/bluedraw.jpg");   
background-size: cover;

answered Jun 27 '20 at 05:43

Kalon Acharjee

1

score 0 · Answer 13 · answered Apr 29 '23 at 16:22

Similar to some of the answers above but I wouldn't set in the body, it is less flexible that way. If I were you, I would create a container and set the background properties specific to it. This allows the image to scale with the page AND enables it to fully take up the background even in situations where the page size differs drastically from the image proportions, see images at the very bottom as an example.

To create such a container, you can do something similar to the following:

In your html page:

<div class='background-div'></div>

In your style sheet:

.background-div {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    background-image: url(../images/background.jpg);
    background-size: cover;
    background-position: center;
}

The CSS block does the following:

Zero out any positioning, ie sets image to start at the top most left corner.
We set position to fixed in order remove the element from the normal document flow.
Set image location. You should change it your respective folder.
We set background to cover which will make the image fit the screen.
Lastly, we center the image.

background style applied to <div> container

background style applied to <body> container

score -1 · Answer 14 · edited May 17 '16 at 20:37

-1

You can do it like what I did with my website:

background-repeat: no-repeat;

background-size: cover;

edited May 17 '16 at 20:37

Michał Perłakowski

88,409
26
156
177

answered May 17 '16 at 18:14

Yasser Agz

1

score -1 · Answer 15 · edited Jul 28 '16 at 12:03

-1

background: url("../image/b21.jpg") no-repeat center center fixed;

background-size: 100% 100%;

height: 100%;

position: absolute; 

width: 100%;

edited Jul 28 '16 at 12:03

demonplus

5,613
12
49
68

answered Jul 28 '16 at 10:19

Ravi dangar

1
1

Fit website background image to screen size

15 Answers15

Linked

Related