PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • 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/iPadApple WatchUniversal Windows 10 AppWindows Mobile
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" pane, in the "Description" group, click "Description" (or select "Description" in the popup menu of the page).
  2. In the "Style" tab, in the "Style" area, select the "Page border/background" element.
  3. To define a background color for the page, specify:
    • the color of border
    • the background color
    • the style of border and background.
  4. To define the background image of page:
    • Select the image that will be used in page background (via the Drop-down button button of "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 supplied 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. See Page template for more details.
  • 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" pane, in the "Description" group, click "Description" (or select "Description" in the popup 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 supplied 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. See Page template for more details.
  • 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
EXAMPLE
http://forum.pcsoft.fr/fr-FR/pcsoft.br.windev/1138-alterando-imgem-fundo-tela-inicial-aplicativo-alterando-papel-1139/read.awp
adrianoboller
09 Apr. 2016