CODEWITHSUNDEEP
htmlcssalignment
edno70
edno70

Reputation: 45

How do I make div background image show accross top of webpage?

I am working on making a navigation bar, and I am running into a problem. This is what my navigation bar looks like:

enter image description here

It has like a 8px white border around it, and this is what I want it to look like:

enter image description here

Without the 8px white border around it.

I am using this code for it:

.header
{
width: 100%;
height: 80px;
background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top:1px solid #939393;
position: relative;
margin-bottom: 30px;
}

I can using this:

margin-left:-8px;
margin-right:-8px;
margin-top:-8px;

And put width to 102%, but then it gives me scrollbars on the bottom.

This may be confusing, but I am a beginner, and I need help. If you can help me, I will appreciate it a lot!

Thanks.

Upvotes: 1

Views: 136

Answers (6)

Dozer789
Dozer789

Reputation: 2036

You have to set the margin on your body to 0 like this:

body
{
    margin:0;
}

Upvotes: 2

Ruddy
Ruddy

Reputation: 9923

User Agents apply default styles to your web page, which you need to override, in this case it's margin so either you can reset the margin like

body {
   margin: 0;
}

Else you can also use a * universal selector like

* {
   margin: 0;
   padding: 0;
}

DEMO HERE

For a proper stylesheet reset, use CSS RESET STYLESHEET

Upvotes: 2

Cam
Cam

Reputation: 1902

This will declare on the entire page not just to the Body.

* {
  padding: 0;
  margin: 0;
}

http://jsfiddle.net/cornelas/gwM4X/2/

Upvotes: 2

Simon Davies
Simon Davies

Reputation: 3686

set your html and body to:

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

This will reset all browsers and remove the border.

Upvotes: 2

ottis
ottis

Reputation: 216

I believe it's because the browser has some default styling, one of which is a margin of 8px surrounding the content, look into "css reset" or if you just want to remove that one thing try

body
{
  margin: 0px;
}

Hope that helps

Upvotes: 2

dthree
dthree

Reputation: 20750

Your body tag comes with margins. That is your problem.

Do:

body { margin: 0px; }

Upvotes: 2

Related Questions