Comment définir une image d'arrière-plan en CSS

Créer un site web est un excellent moyen de s'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. L'un de ces langages de balisage est HTML ou Hyper-Text Markup Language. 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

Comme 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."

 
  
  
  
 

Bonjour le monde
 
  
  

Au cas où vous ne seriez pas familier avec 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 <> c'est une balise. Il existe deux types de balises, une balise qui marque le début d'une section à l'aide de <> et une qui marque la fin d'une section à l'aide de . Le texte d'une section est également destiné à rendre cette distinction plus facile à voir.

Dans notre exemple, nous avons quatre balises. Le html balise indique quels éléments font partie du site Web. La tête La balise 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 sont entre le corps Mots clés. Nous n'avons qu'un seul élément affiché, le p étiqueter. 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 pour le moment, et nous ne pouvons pas faire grand-chose, mais commençons par faire ressortir notre paragraphe afin que nous puissions le distinguer de l'arrière-plan en ajoutant une bordure.

 
  
  
  
 
Bonjour le monde
 
  
  
  

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 rembourrage, autour de notre paragraphe et centrons notre texte.

 
  
  
  
 
Bonjour le monde
 
  
  
  

Notre site Web a meilleure apparence, mais notre code HTML commence à être désordonné 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.

 
  
  
  
  
 
Hello World
 
  
  

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 manières 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. Le #notreparagraphe la section lui indique de styliser uniquement les éléments avec l'id ourParagraph . Notez que id des informations ont été ajoutées à la balise p dans notre corps.

Importation d'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 { 
 aligner le texte :centré 
 } 
 #notreParagraphe { 
 style de bordure :solide ; 
 rembourrage :30px; 
 } 

Ensuite, importez le fichier dans le fichier HTML.

 
  
  
  
  
 
Hello World
 
  
  

Ajouter une image d'arrière-plan avec CSS

Maintenant que vous avez une base solide en HTML et CSS, ajouter une image de fond sera un jeu d'enfant. Tout d'abord, identifiez à quel élément vous souhaitez donner une image d'arrière-plan. Dans notre exemple, nous ajouterons un arrière-plan à toute la page. Cela signifie que nous voulons changer le style du corps . N'oubliez pas que les balises body contiennent tous les éléments visibles.

corps{ 
 image d'arrière-plan :url("sky.jpg"); 
 } 
 p { 
 aligner le texte :centré 
 } 
 #notreParagraphe { 
 style de bordure :solide ; 
 rembourrage :30px; 
 } 

Pour changer le style du corps en CSS, utilisez d'abord le corps mot-clé. Ajoutez ensuite des accolades comme nous l'avons fait avant {}. Toutes les informations de style pour le corps doivent être 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 une feuille de triche des propriétés CSS avec les attributs que vous souhaitez mémoriser.

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 les espaces blancs n'aient pas de sens 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 couvre tout l'arrière-plan. Tout d'abord, vous pouvez définir la taille d'arrière-plan à la taille de l'écran avec background-size :100 % 100 % ; , mais cela étirera l'image et risquera de trop la déformer. Si vous ne souhaitez pas modifier les proportions de l'image, vous pouvez également définir la taille de l'arrière-plan sur couvrir . Cover fera en sorte que l'image d'arrière-plan couvre l'arrière-plan, mais ne déforme pas l'image.

Modification de la couleur d'arrière-plan

Changeons une dernière chose. Maintenant que nous avons un arrière-plan, 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 la couleur de fond attribut au blanc.

corps{ 
 image d'arrière-plan :url("sky.jpg"); 
 } 
 p { 
 aligner le texte :centré 
 } 
 #notreParagraphe { 
 couleur de fond :blanc ; 
 style de bordure :solide ; 
 rembourrage :30px; 
 } 

Beaucoup 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. Relevez le défi de changer la couleur de votre texte ensuite.