Un background full screen extensible en WebDev

Nous souhaitons obtenir dans nos pages, une image de fond, qui s’étende totalement quelle que soit la taille de l’écran sans se déformer.

Ce tutoriel en 5 étapes va vous indiquer comment mettre en œuvre un « background full screen extensible » sous WebDev avec Jquery:

1 – Etape 1 : créez une procédure locale navigateur en jquery que l’on nommera « fullBackground »

Rappel : pour créer une procédure javascript sous WebDev, il suffit de créer une procédure Navigateur dans la page et de cliquer sur l’icone WL située en haut à gauche de l’éditeur de code. L’icone « WL » se transforme alors en « JS » indiquant que vous allez saisir le code jquery.

La procédure prend en paramètre l’alias de l’image à redimensionner.

function fullBackground(_image)

{

var image = $(‘#’+_image);

var image_width = image.width();

var image_height = image.height();

var over = image_width / image_height;

var under = image_height / image_width;

var body_width = $(window).width();

var body_height = $(window).height();

if (body_width / body_height >= over)

{

image.css({

‘width’: body_width + ‘px’,

‘height’: Math.ceil(under * body_width) + ‘px’,

‘left’: ‘0px’,

‘top’: Math.abs((under * body_width) – body_height) / -2 + ‘px’

});

}

else

{

image.css({

‘width’: Math.ceil(over * body_height) + ‘px’,

‘height’: body_height + ‘px’,

‘top’: ‘0px’,

‘left’: Math.abs((over * body_height) – body_width) / -2 + ‘px’

});

}

}

Etape 2 : créez une autre procédure locale navigateur « onResize » en WLangage qui permettra d’appeler fullBackground() sur l’événement resize du navigateur.

PROCEDURE onResize(pclEvenementJS est un objetdynamique = Null)

fullBackground(aliasImageFond)

Etape 3 : le modèle de page.

Téléchargez jquery.js et insérez le dans le header de la page en utilisant la fenêtre multi onglets de description de la page :

Préparez votre image de fond et placez la dans le répertoire web de votre projet.

Dans le modèle de page, placez un champ image que nous appellerons « bkg » avec notre image de fond. Inutile de mettre le champ image à la taille de l’image. Celui-ci risque de vous gêner.

Etape 4 : un peu de css.

Dans la description de l’image, onglet style, sélectionner l’élément « Style CSS » et rajouter dans lecss « position : fixed ; top : 0 ; left : 0 ; z-index:1 ; » afin que notre image ce place bien en dessous du contenu et se cale en haut à gauche du navigateur.

Etape 5 : appel de la procédure.

Enfin dans le code de chargement (navigateur) de notre modèle de page on rajoute l’appel à la procédure

aliasImageFond est une chaine = bkg..alias

JSEvénement(onResize, jsEvénementWindow, jsEvénementResize)

onResize()

Testez votre page. Vous devriez avoir votre image de fond qui s’étend quelle que soit la taille du navigateur sans se déformer.