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

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 à la fois avec HTML et CSS.

Qu'est-ce que le CSS ?

CSS signifie feuille de style en cascade. C'est un langage de programmation qui vous permet de styliser les langages de balisage. 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 basique 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 ».

  
  
  
  
 Hello World

Au cas où vous n'êtes pas familier avec HTML, voyons rapidement 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 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 dans une section est également destiné à rendre cette distinction plus facile à voir.

Dans notre exemple, nous avons quatre balises. Les html La balise indique quels éléments font partie du site Web. Les diriger 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 les 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.

En rapport: 10 exemples de code CSS simples que vous pouvez apprendre en 10 minutes

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.

  
  
  
  
 Hello World

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.

  
  
  
  
 Hello World

Notre site Web est plus beau, mais notre code HTML commence à avoir l'air désordonné avec toutes ces descriptions dans la balise de paragraphe. Nous pouvons déplacer ces informations dans notre en-tête. Notre en-tête est destiné aux informations dont nous avons besoin pour afficher correctement le site Web.

  
  
  
 p {  
 text-align: center  
 }  
 #ourParagraph {  
 border-style: solid;  
 padding: 30px;  
 }  
  
  
  
 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 le style à appliquer. Dans notre exemple, nous avons utilisé deux manières différentes pour lui dire quoi styler. Les p dans la balise de style indique au navigateur Web d'appliquer ce style à toutes les balises de paragraphe. Les #ourParagraph la section lui dit de ne styler que les éléments avec l'identifiant notreParagraphe . Remarquerez que identifiant des informations ont été ajoutées à la balise p dans notre corps.

thèmes windows 7 pour windows 10

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 notrefichierCSS.css .

p {  
 text-align: center  
}  
#ourParagraph {  
 border-style: solid;  
 padding: 30px;  
}

Ensuite, importez le fichier dans le fichier HTML.

  
  
  
  
  
 Hello World

Ajouter une image de fond avec CSS

Maintenant que vous avez une base solide en HTML et CSS, l'ajout d'une image de fond sera un jeu d'enfant. Tout d'abord, identifiez l'élément auquel vous souhaitez donner une image de fond. Dans notre exemple, nous allons ajouter un arrière-plan à toute la page. Cela signifie que nous voulons changer le style de la 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 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 image de fond . 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.

En rapport: 8 effets HTML sympas que tout le monde peut ajouter à son site Web

comment vérifier l'iphone pour le virus

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 parenthèses entre guillemets. Enfin, terminez la ligne par un point-virgule. Bien que l'espace blanc n'ait 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 Répétition du fond:pas de répétition; à 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 de l'arrière-plan à la taille de l'écran avec taille de l'arrière-plan : 100 % 100 % ; , mais cela étirera l'image et risque de trop la déformer. Si vous ne voulez pas que les proportions de l'image soient modifiées, vous pouvez également définir la taille de l'arrière-plan sur couverture . Cover fera que l'image d'arrière-plan couvrira l'arrière-plan, mais ne déformera 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. Faisons son fond blanc. Le processus est similaire. L'élément que nous voulons modifier est #ourParagraph. Le # indique que 'ourParagraph' est un nom d'identification. Ensuite, nous voulons définir le Couleur de l'arrière plan attribuer au 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.

Partager Partager Tweeter E-mail Les 8 meilleurs sites pour des exemples de codage HTML de qualité

Vous voulez apprendre le HTML pour coder vos propres sites Web et applications ? Utilisez ces exemples de pages Web et le code source pour vous apprendre le HTML et le CSS.

Lire la suite Rubriques connexes

La programmation
HTML
Création de sites web
CSS

A propos de l'auteur Jennifer Seaton(21 articles publiés)

J. Seaton est un écrivain scientifique spécialisé dans la décomposition de sujets complexes. Elle détient un doctorat de l'Université de la Saskatchewan; ses recherches se sont concentrées sur l'utilisation de l'apprentissage basé sur le jeu pour augmenter l'engagement des étudiants en ligne. Lorsqu'elle ne travaille pas, vous la trouverez avec elle en train de lire, de jouer à des jeux vidéo ou de jardiner.

Plus de Jennifer Seaton

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner