repeating image in header, wrong height (6 posts)

  1. marcy
    Posted 10 years ago #

    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 20x130 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?

  2. maerk
    Posted 10 years ago #

    Have you set the header's height in your CSS?

  3. marcy
    Posted 10 years ago #

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

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


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

  4. maerk
    Posted 10 years ago #

    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.

  5. marcy
    Posted 10 years ago #

    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?

  6. maerk
    Posted 10 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic