Image declared in css is not showing

Question

I want a image to fill the browsers and these are html side code

<!DOCTYPE html>
<html>
<head>
    <title>Testing</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>

</body>
</html>

since I want the image to be occupied fully in screen i declared it inside the body in css like this but sadly image is not appearing in the screen

body{
    background-image:url('../img/bgmapsimage.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}

yes the image name is correct and location is correct as well.This is the link i refered link

@SumonSarker image path,image location,image extension everything works fine the image even display if height: 500px; is fixed in css — Gladwin James, Oct 29 '16 at 11:45
Your image should be larger for wide screen. I added an answer. You can check it. @GladwinJames — Sumon Sarker, Oct 29 '16 at 11:59

score 0 · Answer 1 · answered Oct 29 '16 at 11:11

Check out this link: https://css-tricks.com/perfect-full-page-background-image/

body{ 
    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;
}

You can also use vh to have full height image no matter the screen size.

score 0 · Answer 2 · answered Oct 29 '16 at 11:16

To test your CSS, try to change the URL in this line

background-image:url('../img/bgmapsimage.png');

to an absolute URL of which you know it will work, like

background-image:url('http://placehold.it/400x300');

If this image is shown, your original image path is the problem (the folder structure which your HTML, CSS and image files are in). If it's not shown, most likely your CSS code itself is the reason.

score 0 · Answer 3 · answered Oct 29 '16 at 11:32

Your body element is empty and therefore has no height. if you add a minimum height, you'll see the image:

body{
    background-image:url('../img/bgmapsimage.png');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    min-height: 200px;
}

score 0 · Answer 4 · answered Oct 29 '16 at 11:58

Update your CSS as like below

body{ 
    background: url('../img/bgmapsimage.png') no-repeat center center fixed; 
    -webkit-background-size: center;
    -moz-background-size: center;
    -o-background-size: center;
    background-size: center;
}

OR

body{ 
    background: url('../img/bgmapsimage.png') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

You can also add css for html tag

Example

html{
 /*Your CSS*/
}

Here is some CSS tricks for full screen background image CSS Tricks

score 0 · Answer 5 · answered Oct 29 '16 at 12:00

0

body{
    //backround image and all
    background-size: cover;
}

Though it depends on the size of the image you are working with.

answered Oct 29 '16 at 12:00

Abhishek Zirota

86
9

Image declared in css is not showing

5 Answers5