3 Replies Latest reply on Apr 16, 2008 8:58 AM by Ben Minson

    Graphics resizing

      Does anyone know how to add a graphic, which is a banner, so that it automatically resizes to the width of the page, regardless of the page width?
        • 1. Re: Graphics resizing
          apjeffery Level 1
          Forgot to mention that I am using RH7
          • 2. Re: Graphics resizing
            Hi apjeffery,

            If you select your image and switch to HTML view, there will be a section highlighted that is responsible for placing your image on the page. It should look something like this:

            <img src="MyImage.jpg" width=800 height=500 border=0/>

            This tag says "put the image with source file MyImage.jpg here with width 800 pixels, height 500 pixels and no border". You can change the width and height to be percentages of the page dimensions like so:

            <img src="MyImage.jpg" width=100% height=20% border=0/>

            Or you can combine the percentages with absolute pixel values as you need.

            Hope this helps,
            • 3. Graphics resizing
              Ben Minson Level 2
              Notice that if you set an image size to use percentage values, the height will adjust as well as the width. If the user resizes the window, the banner image will also be resized automatically, both horizontally and vertically. (If that's what you want, stop reading...)

              To get the banner to extend 100% of the width only and not change height when the window is resized, I would insert a table cell (or div, if you're familiar with CSS) at the top of the topic with width of 100% and left/right margins of some negative value so it extends off the screen. (You may need a negative value for the top margin, or set your topics' body's top margin to zero.)

              Then insert the image in the table with whatever alignment (left, center, etc.) you want. Make the background color of the table the same as your banner image so that it looks like the image extends all the way across. So if your banner image is mostly navy blue, make the background of the table navy blue so that the user can't tell where the image starts and the background begins.

              Hope this helps,