Cover Picture Background

I wanted to display a picture in the background of a page for a project of mine. I’ve already used this solution twice. It works good and looks really great.

Here is the code using the property background-size from CSS3.

body {
  /*Full picture in the background.*/
  background: url(background.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

So, as an example, this is the original picture I’ve used.

Original Picture
French singer Martial from the band Manau.

And this is how it looks when used as a cover picture in my project Orchestre.

fullScreenBackground

Anonyme

Auteur/autrice : Victor

Ingénieur en informatique de formation et de métier, j’administre ce serveur et son domaine et privilégie l'utilisation de logiciels libres au quotidien. Je construis progressivement mon "cloud" personnel service après service pour conserver un certain contrôle sur mes données numériques.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *