why is my background image not working in html5?

Question

<style>  
background-image: url(".....");  
</style>

The background tends to be blank when I use this snippet.Is there any other way to get background image for my page ?.

As in your example , you forget to add class name or id name . — KiranPurbey, Mar 01 '17 at 12:22
Possible duplicate of [When to use IMG vs. CSS background-image?](http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image) — Lukas Körfer, Mar 01 '17 at 13:40

score 0 · Answer 1 · answered Mar 01 '17 at 12:23

The background tends to be blank when i use this snippet

That's because you haven't specified the tag in which you want to apply the background image to.
you haven't specified a valid path to the image.

Simply do something like below but of course replace the URL with your own:

body {
    background-image: url("paper.gif");
}

score 0 · Answer 2 · answered Mar 01 '17 at 12:25

You need to specify which element you want to give the background.

Either you give the element a class or a id or something like body.

.class {
    background-image: url("http://icons.veryicon.com/ico/System/Icons8%20Metro%20Style/Logos%20Wikipedia.ico");
}

#id {
    background-image: url("http://icons.veryicon.com/ico/System/Icons8%20Metro%20Style/Logos%20Wikipedia.ico");
}

body {
    background-image: url("https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png");
}

<div id="id">Test1</div>
<div class="class">Test2</div>

score 0 · Answer 3 · answered Mar 01 '17 at 12:30

0

Also you can write it inline

<body style="background-image: url('img/bg.jpg')">

answered Mar 01 '17 at 12:30

pacanga

416
6
17

score 0 · Answer 4 · answered Mar 01 '17 at 12:36

You need to specify the tag, class, or id you want the background-image to be in. Example

body, .class, #id { background-image: url("img.png"); }

or inline-style

<div style="background-image: url('something.gif')"></div>

You also need to be sure of the image path of the image you want to put

for instance if image is in the same folder as css or html say

body {
    background-image: url("image.png");
}

if in a folder outside the css folder

body {
    background-image: url("../foldername/image.png");
}

and so on

why is my background image not working in html5?

4 Answers4