CODEWITHSUNDEEP
htmlcss
Anbu
Anbu

Reputation: 103

Cant place the image on top of the page

I am creating a site, i have placed a image on top of the page. Eventhough i have set the top margin to 0, the image is not attaching to the top. The image appears around 5px down from the top. my html and css code

<div id="maindiv">
<div id="header">


</div> <!-- header div -->
    <nav class='navigation main-navigation'>
        <ul class='menu main-menu'>
            <li class='menu-item'>
                <a class='three-d' href='/'>
                    <span title='Home'>Home</span>
                </a>
            </li>
          </ul>

And my css code

#maindiv {
width: 900px;       
margin: 0px auto;     
background: #fff url(banner.jpg) no-repeat;

}

#header {height:200px}

you can see there is some space on top of the image. i want the image to be on very top of the page.

https://i.sstatic.net/VEwLF.jpg

Upvotes: 0

Views: 127

Answers (3)

henser
henser

Reputation: 3337

This is happening because Chrome applies natively a margin of 8px to the <body> element.

Inserting the following css to your code will solve the problem:

html, body{
margin:0;
}

To keep the image centered additionally add the following to the #maindiv css style:

background-position:top center;

See JSFIDDLE demo

Upvotes: 1

himanshu
himanshu

Reputation: 1797

add this in your css file

*{margin:0 auto; padding:0px;}

it will remove all default margins and padding

Upvotes: 0

Florin Pop
Florin Pop

Reputation: 5135

Just add this to your code:

#maindiv {
width: 900px;       
margin: 0px auto;     
background: #fff url(banner.jpg) no-repeat; 
position:fixed; // or position:relative;
top:0;     
}

#header {height:200px}

Upvotes: 1

Related Questions