PC SOFT

WINDEV, WEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | Français UK
  • Overview
  • Background image of pages
  • Tip
  • Gradient style background image
  • 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.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. Display the description window of page ("Page .. Description" or "Description" from the popup menu of page).
  2. In the "Style" tab, specify:
    • the image that will be used in page background ("Background image").
      • The "Catalog" button allows you to choose an image in the image catalog supplied with WEBDEV.
      • The "Create a gradient" button is used to start a wizard allowing you to create a background image containing a gradient color (see below).
    • whether the background image must be fixed. If "Fixed background image" is checked, the background image will be fixed when the Web user scrolls the page (vertical scrollbar).
    • the characteristics for the repetition of the image:
      • None,
      • Tiled image (in height and width),
      • Tiled image X (in width),
      • Tiled image Y (in height).
    • Versions 17 and later
      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.
      New in version 17
      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.
      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.
  3. Validate.
Note: You also have the ability to define a background color for the page ("Background color"). See the next paragraph for more details.
To define the image that will be used in page background:
  1. Display the description window of the page: on the "Page" pane, in the "Description" group, click "Description" (or select "Description" from the popup menu of 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 ("Background image"). The "Catalog" button allows you to choose an image in the image catalog supplied with WEBDEV.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.
Notes:
  • 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.

Tip

To get special effects (banners for example), use a background image with a small width that will be repeated in width.
For example:
The repetition in width allows you to create a site that can be extended in width without having to use extensible areas.
Gradient style background image
Versions 15 and later
You can generate an image containing a gradient color and use it as page background. To do so:
  1. Display the description window of page ("Page .. Description" or "Description" from the popup menu of page).Display the description window of the page: on the "Page" pane, in the "Description" group, click "Description" (or select "Description" from the popup menu of page).
  2. Select the "Style" tab.
  3. Click the "Create a gradient..." button.
A wizard helps you create the gradient. Then, choose the repetition mode that will be used to cover the page.
New in version 15
You can generate an image containing a gradient color and use it as page background. To do so:
  1. Display the description window of page ("Page .. Description" or "Description" from the popup menu of page).Display the description window of the page: on the "Page" pane, in the "Description" group, click "Description" (or select "Description" from the popup menu of page).
  2. Select the "Style" tab.
  3. Click the "Create a gradient..." button.
A wizard helps you create the gradient. Then, choose the repetition mode that will be used to cover the page.
You can generate an image containing a gradient color and use it as page background. To do so:
  1. Display the description window of page ("Page .. Description" or "Description" from the popup menu of page).Display the description window of the page: on the "Page" pane, in the "Description" group, click "Description" (or select "Description" from the popup menu of page).
  2. Select the "Style" tab.
  3. Click the "Create a gradient..." button.
A wizard helps you create the gradient. Then, choose the repetition mode that will be used to cover the page.
Background image of browser
To define the image that will be used in browser background:
  1. Display the description window of the page: on the "Page" pane, in the "Description" group, click "Description" (or select "Description" from the popup menu of 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 in browser background ("Background image"). The "Catalog" button allows you to choose an image in the image catalog supplied with WEBDEV.Select the image that will be used in browser 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.
    • 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.
Notes:
  • 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