CODEWITHSUNDEEP
htmlcss
Experimental Rocket
Experimental Rocket

Reputation: 103

My element is not filling the entire space of the page

So using the CSS code below I wanted to make my page fill entirely with an image located on my computer. Instead, it turned out like this:

#background {
    background-image: url("anFtp");
    position: fixed;
    height:100%;
    width:100%;
    z-index: -1;
    float: left;
}

The Stupid Image

As you can probably see there is white space located on the top and left of the page. Now I have tried multiple things, this is just what my code looks like now. The original code looked like:

#background {
    background-image: url("anFtp");
    position: fixed;
    width: 1600px;
    height: 900px;
    z-index: -1;
}

There are multiple results for this and I have tried them (changing 1600px and 900px to 100%) but most of them tell me that something someone else wrote was incorrect, not an actual error of the code or the knowledge of the writer.

EDIT / addition to below answer

adding what the below answer suggested helped the problem but now it looks like this:

enter image description here

Upvotes: 0

Views: 519

Answers (3)

kenicky
kenicky

Reputation: 441

html, body {
    margin: 0px;
    padding: 0px;
}

Upvotes: -1

Mohammad C
Mohammad C

Reputation: 1341

Try this. Does it work

body {margin: 0;}

EDITED: For updated problem

#background {
    background: url(images/bg.jpg) no-repeat center center fixed;
    background-size: cover;
}

Upvotes: 3

Michael Benjamin
Michael Benjamin

Reputation: 371143

All browsers come with a default style sheet. It provides a basic set of CSS rules.

Here is a sample default style sheet from the W3C: https://www.w3.org/TR/CSS22/sample.html

As you can see from the sample, it is recommended that browsers include body { margin: 8px }. That's likely the source of the white space between the body and the viewport.

To override the default use body { margin: 0; }.

Upvotes: 1

Related Questions