0

I am trying to set an image to the back of my website. I want it to cover the whole screen, but every time I move the screen the image zooms in.

For example. If my image was a smiley face, it will show a quarter of the screen filled up when the window takes up half the screen, and when the window takes up the full screen the image takes up everything, but you only see a eye and part of the smile.

Here is my html

<body>
    <div id="bWrapper" >
    </div>
</body>

Here is my css

    body{

    }

    #bWrapper{
        background-size:100$ 100%;
        background-repeat:no-repeat;
        /* Set rules to fill background */
        min-height: 800px;
        min-width: 1124px;

       /* Set up proportionate scaling */
       width: 100%;
       height: 100%;
       position:absolute;
   }
Jatin
  • 3,065
  • 6
  • 28
  • 42
JumpJump
  • 115
  • 1
  • 7

1 Answers1

0

You need to give width:100% and height:100% to body also

html,body
{
  width:100%;
  height:100%;
}
Ankur Aggarwal
  • 2,993
  • 5
  • 30
  • 56