Image centrée avec taille sizeable en fonction de la largeur + texte

**Inferno545** · 22/02/2015, 13h03

Bonjour!
Je suis un débutant de chez débutant et j'aimerais savoir comment mettre une image centrée qui s'ajuste automatiquement en fonction de la largeur de la fenêtre (avec la hauteur qui suis pour ne pas déformer l'image) ET pouvoir mettre des textes en dessous.

J'utilise pour l'instant un background-image :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
body {
    background-image:  url(mon image);
    background-size:   cover;                      
    background-repeat: no-repeat;
    background-position: center center ;            
}

Mais le problème c'est que comme c'est un background, le texte va donc par dessus donc il faudrait le même genre pour une IMAGE (a moins que vous aillez une solution avec background).

Merci

Merci

**NoSmoking** · 22/02/2015, 21h27

Bonjour,
mets ton image en arrière plan dans une DIV, par exemple, en ne lui fixant qu'une largeur à 100%, le reste suivra.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<style>
.fond {
  width:100%;
}
</style>
</head>
<body>
  <img class="fond" src="http://cyberzoide.developpez.com/misc/background12h-1600x1200.jpg">
</body>
</html>

**Valter** · 26/02/2015, 18h33

c'est possible avec background aussi, mais il faut manipuler le z-index.

ce tutoriel explique comment faire http://webtuto.weebly.com/balises-block-et-inline.html

Image centrée avec taille sizeable en fonction de la largeur + texte

Discussions similaires

Partager

Partager