how to make an image appear full as image background

Question

the code below displays the image multiple time like into 10 different image, need it to be full image..

<HTML>

<BODY >

<style>
body {background-image:url('back1.jpg');}
</style>

</BODY>
</HTML>

score 4 · Accepted Answer · answered Apr 01 '13 at 16:58

Something like this has always worked for me.

body {
    background: url(cool-image.jpg) no-repeat center center;
    top:0;
    left:0;
    min-width:100%;
    min-height:100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
   background-size: cover; 
}

</style>

score 2 · Answer 2 · answered Apr 01 '13 at 16:55

2

Try this...

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

answered Apr 01 '13 at 16:55

Jay Bhatt

5,601
5
40
62

score 1 · Answer 3 · answered Apr 01 '13 at 16:54

1

<HTML>

<BODY >

<style>
body {background-image:url('back1.jpg');background-repeat:no-repeat;} // add the no repeat 
</style>

</BODY>
</HTML>

answered Apr 01 '13 at 16:54

Brandt Solovij

2,124
13
24

it appears in the top left, need it to be full – user2116287 Apr 01 '13 at 16:56

score 0 · Answer 4 · answered Apr 01 '13 at 16:56

0

background-repeat: no-repeat;
background-size: cover;

answered Apr 01 '13 at 16:56

Robert Owen

930
7
12

how to make an image appear full as image background

4 Answers4