CODEWITHSUNDEEP
htmlcss
user3438699
user3438699

Reputation: 23

White Space around repeating image

I'm trying to make a good header with a repeating image but for some reason there is white space around it. I have tried many ways to remove it as you will see in my css but I cant figure it out.

My index file is basically just the Div Class Header.

CSS

.header{
position:relative;
width:100%; 
height: 478px;
float:left; 
background:url(../images/headBg.png) repeat-x;
padding: 0;
margin: 0;
outline: none;
border: 0;
overflow-x: hidden; 
}

This is what I'm seeing.

Upvotes: 0

Views: 884

Answers (5)

Ruddy
Ruddy

Reputation: 9923

As I just tested this and you already checked the main ones margin:0 etc the white space will be on your image.

Check this out just to prove its not the code.

DEMO HERE

If you mean the spacing around the outside that would be the body margin:

html, body {
    margin: 0;
}

This will fix that.

DEMO HERE

So this would be your final version (removed all the CSS not needed.)

DEMO HERE

Upvotes: 1

TDDdev
TDDdev

Reputation: 1539

The padding you are seeing is most likely from the body not the Header. You will need to do

body{padding:0;margin:0;}

Upvotes: 1

Pavel Štěrba
Pavel Štěrba

Reputation: 2912

This white "border" is caused by default margin/padding for html and body element. Set it to 0 too:

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

Upvotes: 1

David
David

Reputation: 4873

To remove that white space from around it, add the following code to your CSS

body {margin:0; padding:0}

That will remove the margin or padding (some browsers use margin, some padding) from the document, and your header will be flush to the window.

Upvotes: 1

Turnip
Turnip

Reputation: 36642

The white space is the default padding around a HTML page. Remove it by adding this to your CSS:

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

Demo with padding

Demo without padding

Upvotes: 5

Related Questions