Background image extra space below the image

1
votes

How can I remove below extra space? Below is my HTML mark that I am trying. There is a gap below the image, but it doesn't seems to be a padding/margin.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .backcss {
                background-image: url("https://cdn.pixabay.com/photo/2013/08/25/14/40/wall-175686_960_720.jpg");
                background-color: #cccccc;
                height: 100vh;
                background-repeat: no-repeat;
                background-size: cover;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                display: block;
                padding: 0px !important;
                margin: 0px !important;
                background-position: center, center;
            }
        </style>
    </head>
    <body>
        <div style="display: block;" class="backcss">
            <h1 style="color:white">Hello World!</h1>
        </div>
    </body>
</html>

Thanks.

3
htmlcss
I don't see any space. Or are you referring to the default margin on body? have you tried body { margin: 0; }? – Michael Coker
Margin is not coming from <div class="backcss">, it's the body. – Darren
I copied your code and I don't see any space below – Thomas Ray
i tried body css file still is not working – manishsingh2061
see image it has extra space at bottom : dropbox.com/s/1f2ib04rnwjxith/erorr.png?dl=0 – manishsingh2061

3 Answers

1
votes

There is no padding below the image in the code you posted. If you would like to remove the padding above it try

body {
margin:0;
padding:0;
}

EDIT: Actually it's coming from the h1 tag so:

h1 {
margin:0;
}

Or better option:

.backss {
overflow:hidden;
}
0
votes

The margin comes from the body element, which most major browsers use as default. Simply remove the margin on the body element with: body { margin: 0; }. You can further refer to https://necolas.github.io/normalize.css/ to see which elements browsers tend to differently, and which are the ones that are styled by your browser within their own user-agent-stylesheet.

0
votes

Remove the margin and padding with the code here.

body {
margin:0;
padding:0;
}

Or

h1 {
margin:0;
padding:0;
}