Si vous êtes conception d'un site web, vous souhaiterez peut-être apprendre à créer une image d'arrière-plan fixe ou un filigrane sur une page Web. Il s'agit d'un traitement de conception courant qui est populaire en ligne depuis un certain temps. C'est un effet pratique à avoir dans votre sac d'astuces de conception de sites Web.
Si vous ne l'avez jamais fait auparavant ou si vous l'avez déjà essayé sans chance, le processus peut sembler intimidant, mais ce n'est en fait pas très difficile du tout. Avec ce bref tutoriel, vous obtiendrez les informations dont vous avez besoin pour apprendre la technique en quelques minutes en utilisant CSS.
Commencer
Les images d'arrière-plan ou les filigranes (qui ne sont en réalité que des images d'arrière-plan très claires) ont une histoire dans la conception imprimée. Les documents ont longtemps inclus des filigranes sur eux pour les empêcher d'être copiés. De plus, de nombreux dépliants et brochures utilisent de grandes images d'arrière-plan dans le cadre de la conception de la pièce imprimée. La conception Web a longtemps emprunté des styles à l'impression et les images d'arrière-plan sont l'un de ces styles empruntés.
Ces grandes images d'arrière-plan sont faciles à créer en utilisant les trois Style CSS Propriétés:
- image de fond
- Répétition du fond
- arrière-plan-attachement
- taille de l'arrière-plan
Image de fond
Vous utiliserez background-image pour définir l'image qui sera utilisée comme filigrane. Ce style utilise simplement un chemin de fichier pour charger une image que vous avez sur votre site, probablement dans un répertoire nommé images.
image d'arrière-plan: url(/images/page-background.jpg);
Il est important que l'image elle-même soit plus claire ou plus transparente qu'une image normale. Cela va créer ce "filigrane" regard dans lequel une image semi-transparente se trouve derrière le texte, les graphiques et les autres éléments principaux de la page Web. Sans cette étape, l'image de fond entrera en concurrence avec les informations de votre page et rendra sa lecture difficile.
Vous pouvez ajuster l'image d'arrière-plan dans n'importe quel programme d'édition tel que Adobe Photoshop.
Répétition du fond
La propriété background-repeat vient ensuite. Si vous voulez que votre image soit un grand graphique de style filigrane, vous utiliserez cette propriété pour que cette image ne s'affiche qu'une seule fois.
background-repeat: pas de répétition ;
Sans le sans répétition propriété, la valeur par défaut est que l'image se répète encore et encore sur la page. Ceci n'est pas souhaitable dans la plupart des conceptions de pages Web modernes, ce style doit donc être considéré comme essentiel dans votre CSS.
Arrière-plan-Pièce jointe
L'attachement d'arrière-plan est une propriété que de nombreux concepteurs de sites Web oublient. L'utiliser maintient votre image d'arrière-plan fixe lorsque vous utilisez le fixé propriété. C'est ce qui transforme cette image en filigrane qui est fixé sur la page.
La valeur par défaut de cette propriété est faire défiler. Si vous ne spécifiez pas de valeur d'attachement d'arrière-plan, l'arrière-plan défile avec le reste de la page.
pièce jointe en arrière-plan: fixe ;
Taille de l'arrière-plan
Background-size est une propriété CSS plus récente. Il vous permet de définir la taille d'un arrière-plan en fonction de la fenêtre dans laquelle il est affiché. Ceci est très utile pour sites Web réactifs qui s'affichera à différentes tailles sur différents appareils.
taille de l'arrière-plan: couverture ;
Voici deux valeurs utiles que vous pouvez utiliser pour cette propriété:
- Couverture – Met l'arrière-plan à l'échelle de manière à ce que la pleine largeur ou la pleine hauteur soit affichée. Cela signifie que certaines parties de l'image peuvent ne pas apparaître à l'écran mais que toute la zone sera couverte.
- Contenir – Met l'image à l'échelle de sorte que la largeur et la hauteur entières soient affichées dans la zone à styliser. L'image n'est pas coupée, mais l'inconvénient est que certaines parties de la zone peuvent ne pas être couvertes par l'image.
Ajouter le CSS à votre page
Après avoir compris les propriétés ci-dessus et leurs valeurs, vous pouvez ajouter ces styles à votre site Web.
Ajoutez ce qui suit à l'EN-TÊTE de votre page Web si vous créez un site d'une seule page. Ajoutez-le aux styles CSS d'une feuille de style externe si vous créez un site multipage et souhaitez profiter de la puissance d'une feuille externe.
Modifiez l'URL de votre image d'arrière-plan pour qu'elle corresponde au nom de fichier et au chemin d'accès spécifiques à votre site. Apportez également toute autre modification appropriée à votre conception et vous obtiendrez un filigrane.
Vous pouvez également spécifier la position
Si vous souhaitez placer le filigrane à un endroit spécifique de votre page Web, vous pouvez également le faire. Par exemple, vous voudrez peut-être le filigrane au milieu de la page ou peut-être dans le coin inférieur, par opposition au coin supérieur, qui est la valeur par défaut.
Pour ce faire, ajoutez la propriété background-position à votre style. Cela placera l'image à l'endroit exact où vous souhaitez qu'elle apparaisse. Vous pouvez utiliser des valeurs de pixels, des pourcentages ou des alignements pour obtenir cet effet de positionnement.
position d'arrière-plan: centre ;