Graphics resizing

New Here ,
Apr 15, 2008 Apr 15, 2008

Copy link to clipboard

Copied

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?
TOPICS
HTML

Views

297

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 15, 2008 Apr 15, 2008

Copy link to clipboard

Copied

Forgot to mention that I am using RH7

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 15, 2008 Apr 15, 2008

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Apr 16, 2008 Apr 16, 2008

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 17, 2021 Feb 17, 2021

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 17, 2021 Feb 17, 2021

Copy link to clipboard

Copied

LATEST

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).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation