Comment définir une image d’arrière-plan dans CSS »wiki utile
Créer un site Web est un excellent moyen de vous exprimer. Bien qu'il existe de nombreux outils de création de sites Web, l'écrire vous-même est une façon amusante d'en savoir plus sur le fonctionnement des sites Web dans les coulisses. Un bon projet pour débutant consiste à créer un site Web et à ajouter une image de fond avec CSS. Ce projet vous permettra d'être opérationnel avec HTML et CSS.
Qu'est-ce que CSS?
CSS signifie feuille de style en cascade. C'est un langage de programmation qui vous permet de styliser les langages de balisage. Un tel langage de balisage est HTML ou Hyper-Text Markup Language. Le HTML est utilisé pour créer des sites Web. Bien que vous puissiez contrôler une partie du style du site Web à l'aide de HTML, CSS offre beaucoup plus d'options de contrôle et de conception.
Créer un site Web de base avec HTML
Puisque CSS n'est qu'un langage de style, pour l'utiliser, nous avons d'abord besoin de quelque chose à styliser. Un site web très basique nous suffira pour commencer à jouer avec CSS. Notre page affichera "Hello World".
<html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>Si vous n'êtes pas familier avec le HTML, passons rapidement en revue ce que font tous les éléments. Comme mentionné, HTML est un langage de balisage, ce qui signifie qu'il utilise des balises pour marquer ce qu'est le texte. Chaque fois que vous voyez un mot entouré de <>, il s'agit d'une balise. Il existe deux types de balises, une balise qui marque le début d'une section en utilisant <> et une qui marque la fin d'une section en utilisant </>. Le texte dans une section vise également à rendre cette distinction plus facile à voir.
Dans notre exemple, nous avons quatre balises. La balise html indique quels éléments font partie du site Web. La balise head contient les informations d'en-tête qui ne sont pas affichées sur la page mais qui sont nécessaires pour créer la page. Tous les éléments affichés se trouvent entre les balises de corps . Nous n'avons qu'un seul élément affiché, la balise p . Il indique au navigateur Web que le texte est un paragraphe.
Ajout de CSS au HTML
Maintenant que nous avons une page simple, nous pouvons personnaliser le style avec CSS. Notre page est assez simple en ce moment, et nous ne pouvons pas faire grand-chose, mais commençons par faire ressortir notre paragraphe afin de pouvoir le distinguer de l'arrière-plan en ajoutant une bordure.
<html>
<head>
</head>
<body>
<p style="border-style: solid;" >Hello World</p>
</body>
</html>
Maintenant, notre paragraphe sera entouré d'une bordure noire. L'ajout d'une description de style en CSS à notre balise de paragraphe a indiqué au site Web comment styliser le paragraphe. Nous pouvons ajouter plus de descriptions. Augmentons l'espace blanc, ou remplissage, autour de notre paragraphe et centrons notre texte.
<html>
<head>
</head>
<body>
<p style="border-style: solid; padding: 30px; text-align: center" >Hello World</p>
</body>
</html>
Notre site Web a une meilleure apparence, mais notre code HTML commence à être compliqué avec toutes ces descriptions dans la balise de paragraphe. Nous pouvons déplacer ces informations vers notre en-tête. Notre en-tête contient les informations dont nous avons besoin pour afficher correctement le site Web.
<html>
<head>
<style>
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
</style>
</head>
<body>
<p id="ourParagraph" >Hello World</p>
</body>
</html>Maintenant, notre HTML est plus facile à lire. Vous remarquerez que nous avons dû changer certaines choses. La balise de style indique les informations de style du navigateur Web, mais également ce qu'il faut styliser. Dans notre exemple, nous avons utilisé deux façons différentes de lui dire quoi styliser. Le p dans la balise de style indique au navigateur Web d'appliquer ce style à toutes les balises de paragraphe. La section #ourParagraph lui indique de ne styliser que les éléments avec l'id ourParagraph . Notez que les informations d' identification ont été ajoutées à la balise p dans notre corps.
Importer un fichier CSS sur votre site Web
L'ajout des informations de style à l'en-tête rend notre code beaucoup plus facile à lire. Cependant, si nous voulons styliser de nombreuses pages différentes de la même manière, nous devons ajouter ce texte en haut de chaque page. Cela peut ne pas sembler beaucoup de travail, vous pouvez le copier et le coller après tout, mais cela crée beaucoup de travail si vous souhaitez modifier un élément plus tard.
Au lieu de cela, nous allons conserver les informations CSS dans un fichier séparé et importer le fichier pour styliser la page. Copiez et collez les informations entre les balises de style dans un nouveau fichier CSS ourCSSfile.css .
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Ensuite, importez le fichier dans le fichier HTML.
<html>
<head>
<link rel="stylesheet" href="ourCSSfile.css">
</head>
<body>
<p id="ourParagraph" >Hello World</p>
</body>
</html>Ajout d'une image d'arrière-plan avec CSS
Maintenant que vous avez une base solide en HTML et CSS, ajouter une image d'arrière-plan sera un jeu d'enfant. Tout d'abord, identifiez l'élément auquel vous souhaitez donner une image d'arrière-plan. Dans notre exemple, nous ajouterons un arrière-plan à la page entière. Cela signifie que nous voulons changer le style du corps . N'oubliez pas que les balises body contiennent tous les éléments visibles.
body{
background-image: url("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}Pour modifier le style du corps en CSS, utilisez d'abord le mot-clé body . Ensuite, ajoutez des accolades comme nous l'avons fait avant {}. Toutes les informations de style du corps doivent se trouver entre les accolades. L'attribut de style que nous voulons changer est background-image . Il existe de nombreux attributs de style. Ne vous attendez pas à tous les mémoriser. Marquez un aide-mémoire sur les propriétés CSS avec les attributs dont vous voulez vous souvenir.
Après l'attribut, utilisez deux points pour indiquer comment vous allez modifier l'attribut. Pour importer une image, utilisez url () . cela indique que vous utilisez un lien pour pointer vers l'image. Placez l'emplacement du fichier entre crochets entre guillemets. Enfin, terminez la ligne par un point-virgule. Bien que l'espace blanc n'ait pas de signification en CSS, utilisez l'indentation pour rendre le CSS plus facile à lire.
Notre exemple ressemble à ceci:
Si votre image ne s'affiche pas correctement en raison de la taille de l'image, vous pouvez modifier l'image directement. Cependant, il existe des attributs de style d'arrière-plan dans CSS que vous pouvez utiliser pour modifier l'arrière-plan. Les images plus petites que l'arrière-plan seront automatiquement répétées en arrière-plan. Pour désactiver cela, ajoutez background-repeat : no-repeat ; à votre élément.
Il existe également deux façons de faire en sorte qu'une image recouvre tout l'arrière-plan. Tout d'abord, vous pouvez définir la taille de l'arrière-plan à la taille de l'écran avec la taille de l' arrière-plan: 100% 100%; , mais cela va étirer l'image et peut trop déformer l'image. Si vous ne souhaitez pas que les proportions de l'image soient modifiées, vous pouvez également définir la taille de l'arrière-plan à couvrir . La couverture fera que l'image d'arrière-plan couvrira l'arrière-plan, mais ne déformera pas l'image.
Changer la couleur d'arrière-plan
Changeons une dernière chose. Maintenant que nous avons un historique, notre paragraphe est difficile à lire. Rendons son arrière-plan blanc. Le processus est similaire. L'élément que nous voulons modifier est #ourParagraph. Le # indique que "ourParagraph" est un nom d'identifiant. Ensuite, nous voulons définir l'attribut background-color sur blanc.
body{
background-image: url("sky.jpg");
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}
Bien mieux.
Continuer à concevoir votre site Web avec CSS
Maintenant que vous savez comment changer le style des différents éléments HTML, le ciel est la limite! La méthode de base pour modifier les attributs de style est la même. Identifiez l'élément que vous souhaitez modifier et décrivez comment modifier l'attribut. La meilleure façon d'en savoir plus est de jouer avec différents attributs. Mettez-vous au défi de changer la couleur de votre texte ensuite.