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 sc

Answer 1

Try this, I hope it will help:

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

Answer 2

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

Answer 3

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 4

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

background-size: 100% 100%;

height: 100%;

position: absolute; 

width: 100%;

Answer 5

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

background-repeat: no-repeat;

background-size: cover;

Answer 6

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.