28172 sujets

CSS et mise en forme, CSS3

Positionner du texte dans une image en background

Bonjour,

J'essaie de positionner qq chose (du texte, une image, ...) dans un background qui est une image.

- L'image en fond d'écran s'ajuste en fonction de la taille de l'écran.
C'est fait. Ça marche.

- J'aimerais que le texte soit positionné en dessous de l'image.
Par exemple un texte qui se trouve en dessous de l'image à 10% de la taille de la largeur de l'image.
Ça ne marche pas.

Si vous avez une idée, c'est bienvenue.

Merci.

Voici la page web:
pariskyoto.com

Voici le code:


<!DOCTYPE html> 
<html>

<head>
<meta charset="UTF-8">


<style>

html {
	background: url(image.jpg) #000 no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#block {
	margin-bottom:-10%;
	background-color:#66FF66;
}
</style>
</head> 

<body>
<div id="block">
toto
</div>
</body>

</html>

Modifié par jilusan (20 Jun 2012 - 17:48)
Hmm non, rien à voir avec z-index.

Deux choses:
- Sur les navigateurs testés (Firefox, Chrome), l'image ne couvre pas toute la hauteur de la zone d'affichage du navigateur (viewport). Ça peut se régler avec un height:100% sur l'élément racine (<html>).
- La légende peut éventuellement être positionnée en absolu. En l'occurrence le margin-bottom est un mauvais choix, et le 10% utilisé comme valeur va être calculé en fonction de la largeur du conteneur plutôt que de la hauteur de l'image (donnée que le navigateur aurait du mal à prendre en compte ici...).
Merci pour vos reponses.

@fvsh
En fait, j'ai déjà un bon tuto, j'ai acheté le bouquin de Raphael Goetter. Mais je n'arrive pas encore à trouver la solution à mon pb.

@JuseN

- J'ai mis un heigth:100 % dans mon html, mais je vois pas de différence vraiment.

- L'image du background est désormais placé dans un containeur. J'ai mis position absolute dans le block.

- Autre chose bizarre maintenant: Si je ne mets de titi, l'image ne s'affiche pas.

Mais ça ne marche pas vraiment tout ça. Smiley decu

Le lien URL de la page: pariskyoto.com

Le code:


<!DOCTYPE html> 
<html>

<head>
<meta charset="UTF-8">

<style>

html{
	background-color:#ccc;
	height:100%; /* je ne vois pas la diffrence si je mets ça */
}

#container {
	background-image: url(image.jpg);
	background-size:100%; 
	background-repeat: no-repeat;
	background-color:#000; 
}

#block {
	position:absolute;	
	top:110%;
	background-color:#999;
}

</style>

</head> 

<body>

<div id="container">

titi
  <div id="block">
  toto
  </div>
  
  
</div>  


</body>

</html>

Modifié par jilusan (20 Jun 2012 - 16:19)
jilusan a écrit :
- J'ai mis un heigth:100 % dans mon html, mais je vois pas de différence vraiment.

Forcément, tu as changé les données du problème en appliquant ton image en fond d'un DIV plutôt qu'en fond de l'élément racine.

Pourquoi ne pas avoir conservé l'image en fond de l'élément HTML?

jilusan a écrit :
- Autre chose bizarre maintenant: Si je ne mets de titi, l'image ne s'affiche pas.

Bah oui, logique. Tu as mis ton image en fond d'un élément qui, si tu ne mets pas de texte ou autre contenu, est vide. Un élément vide va avoir une hauteur de zéro pixels, donc sera invisible.
@fvsh

Merci.

Je n'avais pas compris ton message. Je pensais que tu me suggerais de mettre le background dans un div.

J'ai remis le background dans le html.

Dans block, j'ai mis position absolute, bottom -10%.

Quand je mets height 100% dans html, le positionnement du texte se fait correctement. Je veux dire lorsque je modifie la taille de la fenetre, le texte s'ajuste correctement, en restant a 10% de l'image au dessous. Mais il y un pb. L'image se s'affiche pas entierement (dans le sens de la largeur). J'ai besoin que l'image s'affiche entierement L'application que je construit est pour le mobile.

Quand je ne mets pas heigth 100% dans html, l'image s'affiche entierement (dans le sens de la largeur), c'est ce que je veux.
Par contre, le texte se met n'importe ou.

En fait, pas exactement n'importe ou. Si je mets bottom 50%, il se mettra exactement a 50 % de la hauteur de la fenetre. (j'ai teste sur mon mobile).

Comment faire pour qu'il se positionne a 50% de l'image?


<!DOCTYPE html> 
<html>

<head>
<meta charset="UTF-8">

<style>

html {
	background: url(image.jpg) #000 no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
 	/* height: 100%; */ 
}

#block {
	position:absolute;	
	bottom:-10%;
	background-color:#999;
	color:#FFF;
}

</style>

</head> 

<body>


  <div id="block">
  toto
  </div>
  
 


</body>

</html>

Modifié par jilusan (20 Jun 2012 - 17:42)
jilusan a écrit :
Quand je ne mets pas heigth 100% dans html, l'image s'affiche entierement (dans le sens de la largeur), c'est ce que je veux.

OK, j'avais compris l'inverse.
Donc en gros tu veux le même comportement que background-size:contain (et non pas background-size:cover).

jilusan a écrit :
Par contre, le texte se met n'importe ou.

Ton image est une image de fond. Bien entendu ton DIV se fout royalement de savoir qu'il y a une image de fond et quel espace est occupé par cette image de fond, car c'est... une image de fond, qui occupe donc le fond de quelque chose. Smiley smile

Si tu veux placer ton texte par rapport à l'image il faut que cette dernière soit placée comme élément IMG dans le code HTML. Par contre il va bien falloir prévoir les différents cas de figure qui peuvent se présenter (hauteurs et largeurs variables du viewport), et comment ton image et le texte qui l'accompagnent sont censés se dimensionner et se placer dans chaque cas de figure. Il se peut que ça ne soit pas possible de gérer ces besoins exclusivement en CSS, et qu'il faille passer par du JavaScript. À voir.

Pour quelque chose de simple (sans positionnement absolu, sans background-size): un élément IMG en width:100% prendra toute la largeur disponible dans son conteneur. On pourra commencer par ça.
Après pour le placement du texte il faut voir ce que tu veux obtenir exactement (rendu visuel, comportement).
Sujet clos
Aller à