CODEWITHSUNDEEP
htmlcss
manishsingh2061
manishsingh2061

Reputation: 521

Background image extra space below the image

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.

Upvotes: 1

Views: 1578

Answers (3)

Logan Foster
Logan Foster

Reputation: 38

Remove the margin and padding with the code here.

body {
margin:0;
padding:0;
}

Or

h1 {
margin:0;
padding:0;
}

Upvotes: 0

Thomas Ray
Thomas Ray

Reputation: 103

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

Upvotes: 1

Nick Ciolpan
Nick Ciolpan

Reputation: 34

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.

Upvotes: 0

Related Questions