Eh bien, eh bien ... il est temps de décider sur quel fond nous allons regarder à couper le souffle! Et où est cette merveilleuse étiquette qui est responsable de cette entreprise ? Quels attributs a-t-il, pour le dire dans un mot à la mode? Et, surtout, comment placer toute notre beauté ?
Bref, les questions sont nombreuses ! Et il n'y a qu'une seule réponse. Eh bien, il n'y a pas du tout une telle étiquette ! Je n'ai pas encore compris !
Quelques exemples
DANS Dernièrement les curseurs et les arrière-plans plein écran sont devenus extrêmement populaires en général et le style "plat" en particulier. Quelques compromis en ce qui concerne les images d'arrière-plan. Granuleux contre le chargement lent, recourbé ou étiré, coupé horizontalement ou coupé verticalement fixé contre le défilement indépendamment de l'intégration avec d'autres positions d'élément. Voici quelques exemples de sites Web de grandes entreprises utilisant des images d'arrière-plan en plein écran.
Résolution d'écran pour les ordinateurs de bureau et les ordinateurs portables
Voici quelques listes d'autres sites à consulter. Une partie des réponses à cette question porte sur la résolution de l'écran. Après tout, la taille de l'écran joue un rôle important dans la présentation de votre travail. En ce qui concerne la résolution d'écran, les solutions les plus populaires pour les ordinateurs de bureau, les tablettes et les consoles dans Amérique du Nord le sont actuellement.
Mais ne vous fâchez pas ! Pas d'étiquette et pas besoin ! Mais il y a deux attributs merveilleux du descripteur que nous connaissons CORPS. Alors rencontrez un vieil ami!
Contexte, ou comme on l'appelle communément l'arrière-plan traduit en anglais signifie Contexte. Dès lors, rien de plus simple pour se souvenir de deux attirails créés en son honneur. Une - Contexte, et l'autre - bgcolor.
Cela est vrai pour les images d'arrière-plan ainsi que pour les éléments d'image standard. Cela rend les images de taille standard légèrement floues lorsqu'elles sont visualisées sur des écrans haute densité. Les développeurs Web surmontent ce problème en créant des images deux fois plus grandes que les images normales, puis en les affichant à la moitié de leur taille.
Le résultat final est une image de la même taille que vous vouliez qu'elle soit en premier lieu, mais elle a fière allure sur les écrans standard et haute densité. Cela peut créer de très grandes images lorsque vous parlez d'un arrière-plan en plein écran. Si vous ne faites pas attention, cela peut augmenter la taille de chargement de votre page et donc votre vitesse de téléchargement. Néanmoins, une bonne chose Le problème avec les arrière-plans est qu'ils ne sont généralement pas récupérés par votre appareil à moins qu'ils ne soient visibles à l'écran.
Alors, comment sont-ils différents? Quelles opportunités ont-ils ? Et surtout, qu'est-ce qui nous sera utile ?
Commençons par le plus simple - bgcolor. Cet attribut est responsable de la couleur de fond. Vous pouvez substituer n'importe quelle valeur, dans la valeur littérale ou numérique de la couleur, et votre arrière-plan sera coloré comme par magie.
Eh bien, à titre d'exemple, nous pouvons ouvrir notre modèle ou tout fichier que nous avons créé précédemment et essayer de remplir la page avec notre couleur préférée. je vais ouvrir ma page index.html dans bloc-notes(Bloc-notes) et apportez les modifications suivantes :
Ainsi, si vous mettez un arrière-plan dans une requête multimédia qui n'est jamais appelée par la page, cette image n'est jamais récupérée, en gardant débit. Il y a eu plusieurs études plus importantes qui ont discuté de la façon dont le temps de chargement des pages affecte les ventes.
Temps de chargement plus lents = utilisateurs mécontents = moins de ventes. Alors, combien cette image d'arrière-plan parfaite coûte-t-elle à votre design ? Et, si vous utilisez plusieurs images d'arrière-plan pour un curseur ou un fader, comment grande taille assez grand pour supporter les temps de chargement ?
Liste 11. fichier index.html
Enregistrons notre création sous le même nom et voyons ce qui se passe :
je suis sur fond bleu
Cet attribut n'indique pas la couleur de l'image, mais l'image qui doit être placée en arrière-plan ou, comme on dit, en fond d'écran. Vous pouvez choisir n'importe quel fond d'écran que votre fantaisie vous dit. Mon fantasme m'a poussé à prendre une photo sur laquelle je suis dans une veste neuve. Et donc, sans plus tarder, j'ouvre mon dossier index.html et apportez les modifications suivantes :
Une autre considération est de savoir si réutilisation la même image de fond sur tout le site. Si vous utilisez la même grande image de fond sur toutes ou même plusieurs pages de votre site, vous pouvez vous permettre d'utiliser une résolution plus élevée car après le chargement initial, elle sera mise en cache dans le navigateur de votre visiteur. Cependant, si vous utilisez une image différente sur chaque page ou dans chaque nouvelle section, votre visiteur devra télécharger chacune d'elles, ce qui augmentera le temps de chargement de la page.
Liste 12. fichier index.html
Hourra ! Bonjour le monde! Hey les gens! Rencontrer!
Enregistrez ce fichier et voyez ce que nous avons
c'est une image de fond !
Eh bien, d'un côté, c'est agréable d'en voir autant personnes intelligentesà un endroit, mais d'un autre côté ... eh bien, où tant ??? Cependant, blagues à part, vous pouvez comprendre ce que l'attribut a fait Contexte- il a juste pris et multiplié l'image originale, en remplissant tout l'écran avec.
De même, si vous utilisez une seule image d'arrière-plan, vous pouvez évidemment obtenir une résolution plus élevée que si vous téléchargez plusieurs images pour le curseur d'arrière-plan. La plus grande partie de la mise en œuvre est peut-être de savoir si votre site est dimensionné de manière statique. Si vous avez un site de mise en page réactif ou un site qui utilise des requêtes multimédias pour servir différentes structures, vous aurez des besoins différents.
Sur un site de taille fixe, vous vous souciez des bords de l'image de fond par rapport à la taille de l'écran. Pouvez-vous garder l'image centrée, à gauche ou à droite ? Va-t-il s'étirer, se couper, s'estomper ou se répéter ? S'il s'étire, les éléments de premier plan sont-ils toujours lisibles ?
Mais est-il possible de télécharger une image, mais sur tout l'écran ? En gros, vous pouvez ! Et nous allons nous en occuper maintenant. La seule chose à considérer est la taille de l'image. Ainsi, à une résolution d'écran de 800 x 600, l'espace libre pour l'image, si vous soustrayez tous les panneaux supérieur et inférieur, reste 781 x 476 pixels. Prenons cette image.
Sur un site liquide, il faut considérer tous les enjeux d'un site à taille fixe à toutes les tailles d'écran possibles. L'image d'arrière-plan se déplacera-t-elle avec le contenu ? Va-t-il se redimensionner pour rétrécir ou s'étirer ? S'il devient minuscule ou énorme, aura-t-il l'air drôle ou aura-t-il des champs vides ?
La création d'images d'arrière-plan pour plusieurs tailles d'écran spécifiques peut être bon travail, mais cela signifie que vous pouvez enregistrer le site comme bon vous semble. L'autre partie de la réponse à la question est de comprendre comment vous allez le faire. Actuellement, il existe au moins une douzaine de façons d'implémenter une image d'arrière-plan ou un curseur en plein écran. Outre les plugins et les curseurs pré-construits qui s'en occupent pour nous, il y en a relativement méthodes simples.
Alors j'ouvre à nouveau le programme Adobe Photoshop, je choisis une photo avec l'image de la mer, ajuste ses dimensions au 781 x 476 souhaité, optimise pour la toile et enregistrer sous le nom fontsea.jpg dans votre dossier photo. Bon, alors, je vais dans les sentiers battus : j'ouvre le dossier index.html et apportez les modifications suivantes :
Liste 13. fichier index.html
Hourra ! Bonjour le monde! Hey les gens! Rencontrer!
Chacune de ces méthodes a ses propres forces et faiblesses, mais vous devrez déterminer laquelle sera la meilleure pour chaque site spécifique. Remarque spéciale pour la mise en œuvre du curseur. L'idée est d'attendre que la page se charge avant que les images du curseur d'arrière-plan ne se chargent. Dans de nombreux projets, l'image d'arrière-plan peut être séparée des éléments de premier plan. Souvent, il y a suffisamment de séparation visuelle de l'image d'arrière-plan dans la navigation et les blocs de contenu principaux pour que vous ayez plus de flexibilité dans l'apparence de l'image d'arrière-plan.
Enregistrez à nouveau et voyez le résultat
Et la voici - la mer! Joue, fait du bruit en plein air...
C'est beau, n'est-ce pas? Maintenant, si cette résolution d'écran était définie pour tous les utilisateurs ! Mais hélas! Dès que j'augmente la résolution à 1152 x 864, l'image suivante est obtenue :
Malheureusement, je regarde ce reflet...
Si l'image est un peu pressée, ou un peu coupée, ou décalée un peu vers la gauche ou la droite, cela n'affecte pas la conception globale. Parfois, cependant, l'image de fond est intégrée au design et nécessite une certaine taille et un certain positionnement. Ou disons que vous avez un visage ou un visage qui semble complètement déplacé s'il est déplacé ou recouvert par un élément de premier plan. Dans ces cas, vous avez beaucoup moins de flexibilité dans la taille de l'image d'arrière-plan. La décision est essentiellement dictée par la conception et vous faites de votre mieux pour l'adapter.
D'accord, ce n'est pas du tout ce que vous vouliez. Bien sûr, la beauté exige des sacrifices, et vous pouvez en toute sécurité rejeter les utilisateurs dont l'opinion sur la résolution de l'écran ne correspond pas à la vôtre, ou les inviter à choisir les paramètres que vous leur indiquez. En fin de compte, c'est à vous de décider.
Bien qu'il y ait de la beauté sans sacrifice. Ce qui aura fière allure sur tous les moniteurs sans exception. Et je vais essayer de vous aider avec ça. Comme vous pouvez le voir, l'arrière-plan est rempli de copies du dessin. Et cette propriété n'est pas un péché à utiliser. Après tout, nous pouvons créer une petite image, qui occupera beaucoup moins de mémoire qu'une grande, et en remplir tout l'écran. Ici, l'astuce principale est d'essayer de rendre cette image "transparente". C'est-à-dire que les joints entre les images adjacentes ne sont pas visibles. Et pour cela, nous avons à nouveau besoin d'un programme indispensable Adobe Photoshop.
Souvent, "ce qui est nécessaire" est l'utilisation de requêtes multimédias pour fournir la même image avec plusieurs tailles pour s'adapter à différentes tailles d'écran. Avec toutes ces résolutions d'écran, temps de chargement et implémentations à prendre en compte, comment choisir la bonne taille d'image d'arrière-plan pour garder l'utilisateur en confiance ? De nombreux développeurs prennent des photos quelque part au milieu, choisissant une taille d'image suffisamment grande pour ne pas obtenir un pixel, suffisamment petite pour se charger rapidement et fonctionner correctement, et dans un rapport qui entraînera le moins de distorsion, d'étirement ou de recadrage possible.
Bien sûr, vous ne pouvez pas trop vous en soucier et prendre des photos d'arrière-plan prêtes à l'emploi sur Internet, où elles grouillent. Pour ce faire, vous pouvez taper dans n'importe quel moteur de recherche ( www.yandex.ru, www.apport.ru, www.ramber.ru et bien d'autres) mots chers (fond d'écran, fond d'écran, Contexte) et des dizaines et des dizaines de sites apparaîtront à votre service, prêts à vous donner ces arrière-plans pour l'amour de Dieu, et ce qui est particulièrement agréable, entièrement gratuits.
Ne soyez pas surpris plus tard que vous trouverez exactement le même fond sur d'autres sites. Donc, si vous voulez faire quelque chose, quoique arrogant, mais PROPRE, je vous suggère de retrousser vos manches et de vous mettre au travail. De plus, c'est une activité très excitante, dont il est tout simplement difficile de se détacher.
Et c'est ce que nous allons faire maintenant.
Lors de la création de nos premières pages WEB, nous avons utilisé pour celles-ci un fond uni, en indiquant sa couleur dans la balise
en utilisant l'attribut bgcolor. Mais l'arrière-plan peut être non seulement uni, mais également sous la forme d'une image ou d'une photo. Dans ce cas, comme toute autre image, l'esquisse d'arrière-plan doit être au format GIF, JPEG ou PNG. Pour spécifier une image d'arrière-plan dans une balise l'attribut background est utilisé, dont la valeur est le nom ou l'URL du fichier image.Insérons dans le fichier other.html comme arrière-plan de la page WEB le contour de winner.jpg, que nous avons enregistré dans le dossier WEB lors de l'expérience précédente.
Dans le fichier other.html, supprimez l'élément HTML.
Ajouter à la fin de la balise d'ouverture
style background-image:url("gagnant.jpg"); pour que l'étiquette a pris la forme suivante :Dans la fenêtre, vous verrez que maintenant l'arrière-plan de cette page n'est plus un bleu uni, comme auparavant, mais une image de la photo que nous avons téléchargée, enregistrée dans le fichier winner.jpg. Et sur ce tout nouveau fond, le texte du document et le contour de l'image.gif s'affichent. Mais rappelez-vous que nous n'avons pas supprimé l'attribut bgcolor de la balise
. Dans de tels cas, lorsque la balise bgcolor et background sont spécifiés - le navigateur préfère généralement l'attribut background, mais si une image d'arrière-plan est impossible à charger, l'attribut bgcolor est utilisé.Fond de page Web avec CSS
Une autre méthode pour définir un arrière-plan consiste à utiliser le langage CSS Cascading Style Sheet. Comment allez-vous ce moment Vous verrez que cette méthode donne au développeur de la page Web beaucoup plus de contrôle sur l'image d'arrière-plan. Pour en faciliter la prise en main, nous insérerons le croquis winner.jpg comme image de fond de la deuxième page WEB de notre site WEB, enregistré dans le fichier list.html, en utilisant le langage Cascading Style Sheets.
Auparavant, nous déterminions l'apparence du texte sur la première page WEB à l'aide du langage de feuille de style en cascade, en spécifiant les styles souhaités comme valeurs de l'attribut style dans la balise.<р>. Mais il existe une autre option plus souhaitable pour définir les styles, dans laquelle la description des styles est placée à l'intérieur de l'en-tête du document WEB.
… dans la balise d'ouverture doit avoir la forme suivante :Insérons cette balise dans le code HTML du fichier list.html.
Insérer une ligne vide dans le fichier list.html après l'élément
élément HTML devrait ressembler à ceci :
Enregistrez le fichier list.html et ouvrez-le dans un programme de navigateur. Vous verrez que la couleur d'arrière-plan que vous avez définie précédemment a été remplacée par l'image du fichier winner.jpg, et le contenu textuel du document est maintenant affiché sur le nouvel arrière-plan.
Si le texte est difficile à voir sur le nouveau fond, changez sa couleur en utilisant l'attribut text de la balise
, par exemple, .Lorsque vous affichez le document en cours à l'aide de la barre de défilement verticale, vous verrez que l'image d'arrière-plan est répétée en bas de la page. Si la résolution de votre moniteur est réglée sur 1024 x 768 ou plus, la répétition sera à droite. Dans tous les cas, lorsque la taille de l'image de fond est inférieure à la taille de la page en cours, le navigateur par défaut répète le croquis verticalement et horizontalement. Mais vous pouvez dire au spectateur de ne pas répéter l'esquisse, c'est-à-dire de ne l'afficher qu'une seule fois. Pour ce faire, utilisez la propriété background-repeat avec la valeur no-repeat : background-repeat : no-repeat.
Insérez la propriété désignée dans le code HTML du fichier list.html afin que l'élément a pris la forme suivante :
Reproduction du fond sur la page WEB (html)
Désormais, dans la fenêtre du navigateur, l'esquisse d'arrière-plan n'occupe que le haut du document. Le bas et peut-être le côté droit, au cas où résolution la plus élevée moniteur est rempli avec l'arrière-plan de couleur unie que vous avez défini précédemment.
La propriété background-repeat peut également avoir les valeurs suivantes :
répéter- le fond se répète horizontalement et verticalement ; cette valeur est définie par défaut ;
répéter x- le fond n'est répété qu'horizontalement ;
répéter- l'arrière-plan ne se répète que verticalement.
La position de l'image d'arrière-plan sur la page peut être modifiée à l'aide de l'attribut background-position. Les valeurs de cette caractéristique sont des mots clés qui caractérisent la position de l'image verticalement - haut (haut), centre (centre), bas (bas) - et horizontalement - gauche (gauche), centre (centre), droite (droite) . Le premier devrait être position verticale. Par exemple, background-position: center center aligne la vignette au centre de la page à la fois horizontalement et verticalement.
Ajoutez la propriété background-position: center center à la description des paramètres de l'élément body du fichier list.html. Élément dans ce fichier doit prendre la forme suivante :
Le code HTML du fichier list.html devrait ressembler à ceci :