Question

I’m new to HTML; however I have programming experience with Objective-C, here’s my code:

<STYLE TYPE="text/css">
  .horiz {
    background-image: url(Banner.png); 
    background-repeat: repeat-x;  
    height:100px; 
  }
</STYLE>

My banner.png file is a 1×100 image and it goes across the screen fine, however the problem is that the banner indents from the top and left by a few pixels. I do not want this effect, and I have tried position:relative and top:0px left:0px, I have tried setting padding to zero all around (but neither have worked).

Basically, I want to achieve a similar effect to the top bar in Twitter, which hugs the top edges of the screen, but I cant figure it out. Thank you for your time in helping me!

p.s If it makes any difference, I’m using a tag in my body tag.

Answer 1

Your problem is likely unrelated to the background, and actually caused by paddings on the body element itself, which will prevent your .horiz element from fitting snug to the top of the viewport.

Your HTML document, by default, will have some initial styles set. One of these, is padding on the <body/> element. It’s a common practice to use a reset stylesheet, such as the one provided by Eric Meyer. You can find it hosted on Chris Coyier’s website here: http://css-tricks.com/snippets/css/meyer-reset/

Simply reference this first in your document, and then proceed to add all of your own custom styles. One additional thing that this does is normalize the stylistic differences that exist by default between the various browser vendors.