28172 sujets

CSS et mise en forme, CSS3

[Résolu] Ecrire par-dessus une image ?

Bien le bonjour à tous !

Ma première question sur ce forum concernerait un souci d'image.
Je m'explique : J'ai une photo de 4272 px * 2848 px (le souci n'est aucunement une taille trop grande ni le poids de 4.4 Mo, disons je suis en test de laboratoire Smiley smile ) et à la base je voulais la mettre en tant que background principal.
Ce post aurait été la panacée, s'il n'y avait un autre problème.

Où j'en suis : Finalement, la propriété background en CSS ne me permet pas de placer la photo en background centré (comme le post l'explicite, background-width et background-height n'existe pas) donc j'ai placé un <img src='mon_image.jpg' alt='' width='100%' height='100%' /> mais tout mon contenu se trouve en dessous de l'image. Héhé, normal me dirais-vous.

Alors justement, la photo est assez large pour contenir du texte, sauriez-vous s'il est possible "d'écrire par dessus" ?

En espérant avoir été assez explicite.

Au plaisir.

Steve.
Modifié par styvodiabolo (01 Apr 2010 - 16:39)
Haha, il suffisait peut-être de l'écrire pour que magie s'opère...

Mon <div id='global'> qui contient tout le contenu, un position absolute et un top/left à 0px, me fait bien écrire par-dessus l'image.

Voilou.

Au plaisir.

Steve.
Modifié par styvodiabolo (01 Apr 2010 - 16:39)
Bonjour,

En CSS3, il y a la propriété background-size. Ce que tu cherches à faire ressemble à ceci:
#montexte {
  background-image: url(monimage.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

Le problème, c'est que background-size est encore très peu implémenté dans les navigateurs.

Il y a donc la solution de l'élément HTML img, en width:100%;, effectivement. Mais il est considéré comme un contenu et pas comme une image de fond, et donc repousse le texte. Tu peux placer le texte par dessus l'image en utilisant le positionnement absolu, mais si tu cherches à avoir une corrélation entre la zone occupée par le texte et la taille de l'image... ça ne sera pas possible. Le texte ne se limitera pas à la taille de l'image s'il est trop long, et inversement.

De plus mieux vaut éviter d'abuser du positionnement absolu, surtout si on ne le maitrise pas.
Bonjour,

styvodiabolo a écrit :
… …Finalement, la propriété background en CSS ne me permet pas de placer la photo en background centré… …
En CSS il existe tout de même un moyen simple de centrer l'image :
#body {
   background: url("fond-bg.png") center top no-repeat;
} /* centré en largeur et calé au sommet */
#body {
   background: url("fond-bg.png") center center no-repeat;
} /* centré sur les deux axes (x et y) */
Voir les background-position en action sur cette page qui date de 2001 www.thenoodleincident.com… Ça nous rajeunit pas.
Hey ! Merci bien de la rapidité de vos réponses Smiley biggrin !

Du coup, j'ai tenté le background center center, en effet ce n'est pas le résultat escompté mais ce dernier est tout aussi étrange et sympa.

Si le background-size n'est pas l'affaire des navigateurs pour le moment alors je vais l'occulter sans oublier qu'il existe.

En gros, le position absolute m'a zappé mon margin:0 auto; mais ce qui ne cause pas de réels troubles.
Je suis d'accord absolute/top/left c'est moyen mais quand il n'y a plus que Mac Gyver sur le terrain, il fait très bien l'affaire.

En vous remerciant de vos suggestions.

Au plaisir.

Steve.
Bonjour,

Une astuce jquery liée à la discussion : MaxImage où définir une bonne fois pour toute la longueur que l'on veut pour nos images.

Au plaisir.

Steve.
Sujet clos
Aller à