tropicsbear: Tadashi carrying Ainosuke bridal style (Ardeth: whut)
Bear ([personal profile] tropicsbear) wrote in [community profile] style_system2012-01-01 06:13 pm

Header image size

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?
vae: (Default)

[personal profile] vae 2012-01-01 12:25 pm (UTC)(link)
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)
vae: (Default)

[personal profile] vae 2012-01-01 12:36 pm (UTC)(link)
Hmm. When you say "after", do you mean to the right or below?
vae: (Default)

[personal profile] vae 2012-01-01 01:35 pm (UTC)(link)
Must be padding somewhere in a parent element, but I can't see anything at a quick glance.