none
Adjusting Image in Header RRS feed

  • Question

  • Hello all!

    I'm new to web design and trying to figure it out by myself. My task right now is to place and adjust a logo in the header section that will span across the entire width of my site.

    The width of the section I’m putting my image in is known (it’s one of the built-in templates), and I've tried to trim my logo image to make it match the width of the header, however this image always turns out either too narrow or too broad when viewed in my browser, and never the right size. Hope my explanation makes sense.

    How do I go about this?

    Thank you!

    Thursday, January 10, 2019 7:00 PM

Answers

  • The width of the uppermost section of that template is 100% of whatever width you make your browser.  It is not a fixed width.  Preview a page, and resize your browser, make it more narrow then make it wider, and watch what happens to see what I mean.  In other words, there is no such thing as an image that will match the width of that section.  You can ask the browser to resize an image to 100% width, but that will distort your logo if the browser width is anything other than your real logo image's size, so that's a bad idea.  You need to rethink your design.

    (That template is not a fully responsive design, which would be best, but it is a flexible design, working across a range of browser widths except for a narrow width of a small phone.)


    Kathleen Wilber
    BrightWillow - Asp.Net Applications

    Saturday, January 12, 2019 8:16 PM

All replies

  • There is no way to tell you how to do this without knowing what program you are using to trim the image.  Assuming you know the width, in pixels, that you are trying to reach, any image editing program will tell you the width in pixels, and let you resize the image to that size, or crop it to that size.

    Kathleen Wilber
    BrightWillow - Asp.Net Applications

    Friday, January 11, 2019 12:23 AM
  • Thanks for the reply!
    Let me put this another way.
    Could you please tell me how to determine the width of the uppermost section of the Small Business 2 template? That's the one I'm using.
    Friday, January 11, 2019 12:48 PM
  • The width of the uppermost section of that template is 100% of whatever width you make your browser.  It is not a fixed width.  Preview a page, and resize your browser, make it more narrow then make it wider, and watch what happens to see what I mean.  In other words, there is no such thing as an image that will match the width of that section.  You can ask the browser to resize an image to 100% width, but that will distort your logo if the browser width is anything other than your real logo image's size, so that's a bad idea.  You need to rethink your design.

    (That template is not a fully responsive design, which would be best, but it is a flexible design, working across a range of browser widths except for a narrow width of a small phone.)


    Kathleen Wilber
    BrightWillow - Asp.Net Applications

    Saturday, January 12, 2019 8:16 PM