Graphics resizing

[apjeffery]

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?

[apjeffery]

Forgot to mention that I am using RH7

[darkagn]

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,
darkagn

[Guest]

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,

Ben

[bronxguys02]

Another team member set up the following for the "cover page" of the help file. As it is set as a background image, it does not resize when changing the size of the window. Can I simply change it to an image with percentage values? 

<style type="text/css">/*<![CDATA[*/
body {
background-image: url("images/splash.jpg");
background-repeat: No-Repeat;
}
/*]]>*/</style>

[Amebr]

There's a background-size property, which I've never used.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

I'd probably start with:

background-size: cover;

But there are a bunch of other settings, if that doesn't work. It looks like you can also set a width and height value like "background-size: 100% 50px;" which I think would stretch the image width to fit the width of the window while limiting the height to 50px (you'll get a distorted image if you don't match the original image aspect ratio).