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);}

Answer 1

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

Answer 2

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 !!

Answer 3

You can try with

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

works for me :)

Answer 4

Try this, I hope it will help:

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

Answer 5

Try this:

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

Answer 6

.. 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.

Answer 7

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

Answer 8

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;
}

Answer 9

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

Answer 10

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;
}

Answer 11

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.

Answer 12

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

Answer 13

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

background-repeat: no-repeat;

background-size: cover;

Answer 14

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

background-size: 100% 100%;

height: 100%;

position: absolute; 

width: 100%;