All Articles Web
Configuration Fond carrelé avec CSS
Geoff Blake on Wed, April 27th | 0 comments
Setting up tiled backgrounds via CSS is a great way to add visual appeal to your website and to layout components that make up your overall design. The good news is, it's super easy, and there are som

Setting up tiled backgrounds via CSS is a great way to add visual appeal to your website and to layout components that make up your overall design. The good news is, it's super easy, and there are some additional properties that we can make use of to further control our backgrounds. Let's check it out!

Etape 1

Première chose Première - nous avons besoin d'un graphique à carreaux! Probablement le meilleur endroit pour ce faire est de Photoshop . Vous pouvez utiliser un graphique ramolli, de sorte qu'il apparaît en tant que filigrane, un logo, ou vraiment tout ce que vous voulez. Assurez-vous que le graphique n'est pas trop grand, et l'enregistrer au format PNG, JPEG ou GIF. Maintenant nous sommes prêts à l'utiliser dans notre mise en page.

Etape 2

Ensuite, nous allons charger le graphique dans notre mise en page via CSS. Cette aurez besoin d'un peu de codage à la main, mais ce n'est pas quelque chose de trop difficile à enlever. Premièrement, trouver la règle CSS que vous souhaitez appliquer l'arrière-plan graphique. Cela pourrait être un sélecteur d'ID qui contrôle un élément div, une domination de classe, ou toutes autres règles que vous pourriez avoir à utiliser. Dans mon exemple, je vais appliquer un arrière-plan graphique à un élément du corps redéfini.

Ajouter dans le "background-image" de propriété, suivie par un colon plein, puis "url". Puis entre parenthèses, tapez le chemin de votre graphique, suivie par un point-virgule. Par exemple, voici comment mon code ressemble:

background-image: url (images / background.png);

Notez que mon graphique », background.png" est situé dans un dossier appelé "images". N'oubliez pas de sauvegarder vos fichiers et de prévisualiser votre travail dans votre navigateur. Remarquez comment les carreaux de fond graphique par défaut. Nous ne pouvions laisser les choses comme elles sont, ou de continuer à personnaliser les choses plus loin en utilisant d'autres propriétés CSS.

Étape 3

Si vous souhaitez contrôler le comportement du carrelage, vous pouvez ajouter dans le "background-repeat" propriété. Vous pouvez ensuite définir la valeur de «répéter», «repeat-x", "repeat-y", ou "no-repeat". Répéter-x et y répéter la force de carrelage seulement horizontalement ou verticalement, tandis qu'aucune répétées ne permettent pas de carrelage.

Etape 4

Another option that we have available is the ability to control the horizontal and vertical positioning of a non-tiling background image. Try adding in the "background-position" property, followed by two pixel values. The first pixel value is the graphic's horizontal position, and the second, its vertical position.


As you can see, CSS makes it super-easy to control background images. The fun part is coming up with cool graphics and seeing what's possible. Try experimenting with different tiled images, gradients, and patterns. Have fun!

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: