ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Page
  • Overview
  • Background image of pages
  • Background image of browser
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Style of pages: Background image
Overview
To optimize the style of your pages, WEBDEV allows you to use:
  • a background image in your pages. Your controls are displayed above this background image.
  • an image in browser background.
Background image of pages
To define the image that will be used in page background:
  1. Open the page description window: on the "Page" tab, in the "Description" group, click "Description" (or select "Description" in the context menu of the page).
  2. In the "Style" tab, in the "Style" area, select the "Page border/background" element.
  3. To define the page background color, specify:
    • the color of the borders
    • the background color
    • the style of the borders and background.
  4. To define the page background image:
    • Select the image that will be used as page background (via the Drop-down button button of the "Background image" control):
      • The "Browse" option is used to select an image file accessible from your computer.
      • The "Catalog" option is used to select an image in the image catalog provided with WEBDEV.
    • Specify the characteristics regarding the image repetition:
      • None,
      • Tiled image (in height and width),
      • Tiled image X (in width),
      • Tiled image Y (in height).
    • Specify the horizontal and vertical position of background image. These options are used to manage the alignment of background image: Left, Center, Right, Top and Bottom.
    • Specify the management mode of image size:
      • none
      • homothetic extended (cover): The image is proportionally enlarged in order for the smallest image side to be entirely displayed in the page.
      • homothetic (contain): The image is proportionally enlarged so that it is entirely displayed in the page.
  5. Validate.
Remarks:
  • The management mode of the image size is a feature available in CSS3. To use this feature, the page must be generated in HTML 5 mode. The generation mode of HTML pages can be defined:
    • for the project ("Advanced" tab of project description, "Generation standard of HTML code" option).
    • for the page ("General" tab of page description, "Generation standard of HTML code" option).
  • To define the same page background image for all the pages of your project, define this image for the page template used by your project. For more details, see Page template.
  • The background image is displayed by the browser. If the image file used is too big, the display of the page may be slowed down.
Background image of browser
To define the image that will be used in browser background:
  1. Open the page description window: on the "Page" tab, in the "Description" group, click "Description" (or select "Description" in the context menu of the page).
  2. In the "Style" tab, in the "Style" area, select the "Browser background" element.
  3. Specify (if necessary) the background color of the browser.
  4. Specify the characteristics of the background image:
    • Select the image that will be used as browser background (via the Drop-down button button of the "Background image" control):
      • The "Browse" option is used to select an image file accessible from your computer.
      • The "Catalog" option is used to select an image in the image catalog provided with WEBDEV.
    • To create a gradient, click the "Create a gradient" button. This button allows you to generate an image containing a gradient and to use it as browser background. A wizard helps you create the gradient.
    • If "Fixed background image" is checked, the background image of the browser will be fixed when the Web user scrolls the page (vertical scrollbar).
    • Specify the characteristics regarding the image repetition:
      • None,
      • Tiled image (in height and width),
      • Tiled image X (in width),
      • Tiled image Y (in height).
    • Specify the horizontal and vertical position of background image. These options are used to manage the alignment of background image: Left, Center, Right, Top and Bottom.
    • Select the management mode of image size:
      • none
      • homothetic extended (cover): The image is proportionally enlarged so that the smallest side of the image is entirely displayed in the browser.
      • homothetic (contain): The image is proportionally enlarged to be entirely displayed in the browser.
  5. Validate.
Remarks:
  • The management mode of the image size is a feature available in CSS3. To use this feature, the page must be generated in HTML 5 mode. The generation mode of HTML pages can be defined:
    • for the project ("Advanced" tab of project description, "Generation standard of HTML code" option).
    • for the page ("General" tab of page description, "Generation standard of HTML code" option).
  • To define the same browser background image for all the pages of your project, define this image for the page template used by your project. For more details, see Page template.
  • The background image is displayed by the browser. If the image file used is too big, the display of the page may be slowed down.
See also
Minimum version required
  • Version 14
Comments
Click [Add] to post a comment

Last update: 06/10/2022

Send a report | Local help