1html {
2 background: url(images/bg.jpg) no-repeat
3 center center fixed;
4 -webkit-background-size: cover;
5 -moz-background-size: cover;
6 -o-background-size: cover;
7 background-size: cover;
8}
1html {
2 background: url(images/bg.jpg) no-repeat center center fixed;
3 -webkit-background-size: cover;
4 -moz-background-size: cover;
5 -o-background-size: cover;
6 background-size: cover;
7}
1#example1 {
2 background: url(mountain.jpg);
3 background-repeat: no-repeat;
4 background-size: auto;
5}
6
7#example2 {
8 background: url(mountain.jpg);
9 background-repeat: no-repeat;
10 background-size: 300px 100px;
11}
1body {
2 background-position: center;
3 background-repeat: no-repeat;
4 background-size: cover;
5}
1 /* To make an Image fit the Screen*/
2
3
4METHOD - 1
5
6html {
7 background: url(images/yourImage.jpg) no-repeat center center fixed;
8 -webkit-background-size: cover;
9 -moz-background-size: cover;
10 -o-background-size: cover;
11 background-size: cover;
12}
13
14METHOD - 2
15
16IMP: To make sure that the image covers the whole screen,
17you must apply **height: 100%** to both <html> and <body>:
18
19body, html {
20 height: 100%;
21}
22
1-webkit-background-size: cover;
2 -moz-background-size: cover;
3 -o-background-size: cover;
4 background-size: cover;