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

[gadgetqueen]

I had that too; reducing the height to 190px seemed to fix it. not sure why.

[tropicsbear]

I'll give it a try. Thanks.

[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.

[facetofcathy]

Hi there, I looked at your journal out of curiosity, and I have a big font size and a wide screen. What I see is some repeat of your header image in both directions.

The horizontal repeat to the right is caused by the wide screen. The vertical repeat below is caused by my font size making the header box bigger because it does have some padding declared on it, and the padding is set in ems. Your workaround of the smaller height setting will only work as intended on smaller font sizes.

Here's some code I tested in Web Developer:

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

Setting the padding to 0 and the height back to 200px will fix any vertical repeat and show your whole image to viewers no matter their font size.

The background-size property will make the image scale up without losing aspect ratio when the header box is wider than the image. You will always see all of the width of the image, but at very wide screens a bit of the bottom is cut off. If you'd rather that than having the repeat show, you need the two last lines of code to make it work on all browsers, with the exception of IE 8 or lower. In those browsers, the viewer should just see the normal horizontal repeat. If you like the repeat okay, just leave those two lines out.

[tropicsbear]

Wow, thanks so much! It seems to be working fine with my resolution.