Header image size

[tropicsbear]

First post for 2012!

So I'm trying to edit the layout I'm currently using. I tweaked some of the original CSS to accomodate my new header. I set the height to 200px since the image height is exactly 200px. But I noticed that there seems to be an extra few couple of pixels and that my header repeats.

This is the relevant CSS:

#header {
background:url("http://a.random-image.net/bcdmonte/batman.jpg") repeat scroll 0 0 transparent;
border:2px dashed #2D231C;
height:200px;
text-align:right;
}

I tried removing repeat scroll 0 0 transparent from the CSS but that just resulted in the entire header (plus the border) to disappear. Help?

Comments

[vae]

I suspect the extra is because of a default padding to the element on the page. Try reducing the height by 4px, or just replace "repeat" with "no-repeat" which should stop the image from repeating.

(W3 Schools explains the background repeat options)

[tropicsbear]

Changing to "no-repeat" resulted in a white space after the header image, but reducing the pixel width works fine.

[vae]

Hmm. When you say "after", do you mean to the right or below?

[tropicsbear]

Below.

[vae]

Must be padding somewhere in a parent element, but I can't see anything at a quick glance.