Le fond

DéfinitionCouleur

1
.div { background-color: red;}

DéfinitionImage

1
div {
2
  width:200px;
3
  height: 200px;
4
  border: 2px solid gray;
5
  background-image: url(images/eau.jpg);
6
}
image

Dans une page css l'url est relative à la page.

Définitiontaille

background-size

1
div {
2
  width:200px;
3
  height: 200px;
4
  border: 2px solid gray;
5
  background-image: url(images/eau.jpg);
6
  background-size: 50px;
7
}
size

DéfinitionRépétition

background-repeat : repeat-x, repeat-y, repeat, space, round, no-repeat

1
div {
2
  width:200px;
3
  height: 200px;
4
  border: 2px solid gray;
5
  background-image: url(images/eau.jpg);
6
  background-size: 50px;
7
  background-repeat: no-repeat;
8
}
repeat

DéfinitionRépétition

background-position : x y; x : left, center, right, valeur, right valeur. y : top, center, bottom, valeur, bottom valeur.

1
div {
2
  width:200px;
3
  height: 200px;
4
  border: 2px solid gray;
5
  background-image: url(images/eau.jpg);
6
  background-size: 50px;
7
  background-repeat: no-repeat;
8
  background-position: bottom;
9
}
position

DéfinitionAttachement

background-attachment : scroll, local

En cas de scrolling le fond peut être fixe ou suivre le contenu.

1
<div class="div1">
2
  <p>Lorem ipsum dolor ...</p>
3
</div>
4
<div class="div2">
5
  <p>Lorem ipsum dolor ...</p>
6
</div>
1
div{
2
  width:200px;
3
  height: 200px;
4
  border: 2px solid gray;
5
  background-image: url(images/eau.jpg);
6
  background-size: 200px;
7
  background-repeat:repeat-y;
8
  overflow-y: auto;
9
}
10
div div.div1{
11
  background-attachment: scroll;
12
}
13
div div.div2{
14
  background-attachment: local;
15
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium ultrices enim, sit amet ultricies nulla placerat suscipit.

Pellentesque aliquet, erat non luctus blandit, mauris eros dignissim arcu, nec consequat neque erat at elit. Duis rutrum vitae risus vitae bibendum.

Fusce in lorem leo. Donec ut tempor orci. In id tincidunt augue. Quisque eu leo ac libero volutpat dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium ultrices enim, sit amet ultricies nulla placerat suscipit.

Pellentesque aliquet, erat non luctus blandit, mauris eros dignissim arcu, nec consequat neque erat at elit. Duis rutrum vitae risus vitae bibendum.

Fusce in lorem leo. Donec ut tempor orci. In id tincidunt augue. Quisque eu leo ac libero volutpat dignissim.

attachment

DéfinitionSuperposition

On peut mettre plusieurs images

1
<div class="div1">
2
  <p>Lorem ipsum dolor ...</p>
3
</div>
4
<div class="div2">
5
  <p>Lorem ipsum dolor ...</p>
6
</div>
1
div{
2
  width:200px;
3
  height: 200px;
4
  border: 2px solid gray;
5
  background-image: url(images/yoshi.png),url(images/eau.jpg);
6
  background-size: 80px, 300px;
7
  background-repeat: no-repeat;
8
  background-position: 90px 75px, right bottom;
9
}
superposition
yoshi
eau

DéfinitionSprites

Afin d'accélérer les temps de chargement, une technique consiste à regrouper plusieurs images dans une seule.

Et d'afficher qu'une portion de l'image à l'aide des propriétés height, width, background-image et background-position.

Réseaux Sociaux
1
<span class='bg-facebook'></span>
2
<span class='bg-googleplus'></span>
3
<span class='bg-instagram'></span>
4
<span class='bg-linkedin'></span>
5
<span class='bg-pinterest'></span>
6
<span class='bg-twitter'></span>
7
<span class='bg-youtube'></span>
1
[class ^= 'bg-']{
2
    display:inline-block;
3
    width: 60px; height: 60px;
4
    background-image: url('../res/reseauxSociaux.png')
5
}
6
.bg-facebook {
7
    background-position: -10px -10px;
8
}
9
.bg-googleplus {
10
    background-position: -90px -10px;
11
}
12
.bg-instagram {
13
    background-position: -10px -90px;
14
}
15
.bg-linkedin {
16
    background-position: -90px -90px;
17
}
18
.bg-pinterest {
19
    background-position: -170px -10px;
20
}
21
.bg-twitter {
22
    background-position: -170px -90px;
23
}
24
.bg-youtube {
25
    background-position: -10px -170px;
26
}
Interprétation de CSS

Sites permettant de faciliter la création des sprites :

Stitches

sprite-generator