The background image width does not work

Question

I have an html file, and I set the background url to an image, but the image does not fill the browser's width:

I also tried set the width property to make it wider, but it seems to have no effect.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #bg {

            height:1500px;
            background: url("img/timg7.jpg") center top no-repeat;
            width:1800px;
        }
    </style>

</head>
<body id="bg">

<div style="width:400px; height: 200px; background-color: antiquewhite">
    BLOCK
</div>

</body>
</html>

You gave your body a width? What's with that? – StackSlave Oct 13 '17 at 02:49 — StackSlave, Oct 13 '17 at 02:49

score 4 · Accepted Answer · answered Oct 13 '17 at 02:46

4

You need the background-size attribute for this.

Your CSS should be:

#bg {

    background: url("img/timg7.jpg");
    background-size: cover;
    background-repeat: no-repeat;

}

answered Oct 13 '17 at 02:46

Christopher Littlewood

793
2
12
37

score 0 · Answer 2 · answered Oct 13 '17 at 02:41

0

In this scenario, you should use background-size, there is a demo for background-size.

Try to use:

 background-size: 120%;

answered Oct 13 '17 at 02:41

aircraft

25,146
28
91
166

score 0 · Answer 3 · answered Oct 13 '17 at 02:44

0

Try to use: background-size: cover;

and please remove those height and width

answered Oct 13 '17 at 02:44

Edwin Encomienda

61
6

score 0 · Answer 4 · answered Oct 13 '17 at 02:48

0

Try this:

#bg {

     background: url("img/timg7.jpg") center top no-repeat;
     background-size: cover;
}

answered Oct 13 '17 at 02:48

Ehsan

12,655
3
25
44

score 0 · Answer 5 · answered Oct 13 '17 at 02:50

0

#bg{
  background: url("img/timg7.jpg");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

answered Oct 13 '17 at 02:50

Anil Shrestha

1,180
11
16

score 0 · Answer 6 · answered Oct 13 '17 at 02:58

You don't need an id on your body, as document.body with get it with JavaScript, and you can just use body in the CSS. Of course, that's not your issue. See the code below:

html,body{
 padding:0; margin:0;
}
body{
  background:url(img/timg7.jpg) no-repeat; background-size:cover;
}

By the way, you should use external CSS, so it's cached into Browser Memory.

The background image width does not work

6 Answers6