repeating image in header, wrong height

  • I am working on a local install so can’t give anyone a url, sorry.

    I have a header with an image on the left and the blog title and a navigation menu (horizontal list) on the right. I want the header’s background color to be a certain blue.

    First I tried just setting the color with CSS, but I can’t get the rest of the header to match the height of the image plus its 5px margin, which adds up to 130px.

    My latest attempt was first of all to recreate my image so that it includes the blue border. Then I created a 20×130 blue image and set it to repeat horizonatlly.

    Since this image is exactly the height I need, why O why is it being cut short in both FF and IE? It ends right at the lower edge of the navigation menu items.

    What else could I do to get the header height correct?

Viewing 5 replies - 1 through 5 (of 5 total)

  • Have you set the header’s height in your CSS?

    Thread Starter marcy

    (@marcy)

    Yes, I tried that, and it didn’t work.

    Well, it didn’t work yesterday, but today it does. That is just weird.

    Thanks!

    Anyway, I’m still curious why using a background image of the correct height didn’t actually work.

    An element’s height and width is set relative to the size of its content. So if you had a million <br /> tags, it would have a height of a million lines.

    So if you don’t have any, or at least not much, content, it wouldn’t have much high.

    Since CSS is only to do with styling, and not content, background images don’t affect elements’ heights. If you had used an <img> tag, it would have affected the height, since <img> is part of the content.

    Thread Starter marcy

    (@marcy)

    Hmmm… interesting. So if I assign this correct height background image to the header via CSS, there’s no way to make it show the whole image? Or could I use a display: 100% declaration?

    No, you can do it easily in CSS: say your image is 112px high, then you just assign height: 112px; to your header.

    I was just explaining what happens when you don’t set the height property in the CSS — the browser calculates it based on the element’s content.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘repeating image in header, wrong height’ is closed to new replies.