• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to make wallpaper image fit screen?

Guest
Nov 16, 2010 Nov 16, 2010

Copy link to clipboard

Copied

For my webhelp project, in the header area of my master page, I have select an image, which serves as a banner.

On the Header Properties Shading tab, the Left option is selected for the X field. This means that the left side of the banner is fixed to the left side of the help screen and will always be visible regardless of how the screen is resized.

The problem is the right-side of the banner, which will not be visible if I resize the help screen to to less than the banner width, or will display incorrectly if I resize the screen greater than the banner width.

Is there a way to fix the image so that the entire banner will be visible regardless of the screen size?

I am using RoboHelp Version 8.0.2.

Views

815

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
LEGEND ,
Nov 16, 2010 Nov 16, 2010

Copy link to clipboard

Copied

Hi there

I've seen many web pages where this is done. I do believe the commonly accepted approach is to configure your banner such that the width is far wider than you ever expect the user to have. For example, perhaps determine the largest resolution that is likely to be in use, then add a few pixels to the width to be sure. That way the full banner displays and if the browser is narrower, there are parts that simply aren't shown.

Cheers... Rick

Helpful and Handy Links

RoboHelp Wish Form/Bug Reporting Form

Begin learning RoboHelp HTML 7 or 8 moments from now - $24.95!

Adobe Certified RoboHelp HTML Training

SorcererStone Blog

RoboHelp eBooks

Votes

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
Guest
Nov 16, 2010 Nov 16, 2010

Copy link to clipboard

Copied

Hi Rick,

 

I thought of that, but the problem is that there is an icon on the left side and the right side,

 

Regards,

Chaim Rosenblum

crosen1966@yahoo.com

Votes

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
LEGEND ,
Nov 17, 2010 Nov 17, 2010

Copy link to clipboard

Copied

LATEST

Hi,

If I understand correctly, the banner has three parts:

     1. A repeating background.

     2. An image that is on the left side

     3. An image that is on the right side

You can cut up the image. Have the background repeat on the entire page and position the other images relative to the browser width so they reposition when the browser is scaled.

Example with a background and an image:

div.header {
    width: 100%;
    height: 75px;
    line-height: 60px;
    background: url(images/title.png) repeat-x left bottom;
    position: relative;
    z-index: 10;
}

div#melodies {
    width: 332px;
    height: 56px;
    background: transparent url(images/melodies.png) no-repeat right top;
    position: absolute;
    top: 0;
    right: 0;
}

The HTML is:

<div class="header"><div id="melodies"></div></div>

Greet,

Willam

Votes

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
Download Adobe RoboHelp