18041 sujets

Questions générales et questions de débutants

[Résolu] Background hors cadre. .

Bonjour tout le monde,

Je cherche à mettre une image sur la droite de mon wrapper. j'y arrive avec un ::after. Smiley smile

Mais là ou je ne suis pas satisfait du résultat c'est que lorsque je rétrécie la fenêtre du navigateur l'image est comptée dans les éléments, du coup un scrolleur horizontale apparait. Smiley confus

J'aimerai que cette image soit hors du flux., qu'elle n'influence pas la fenêtre de navigation. Comment je dois faire ça ? Smiley murf
Modérateur
Salut,

Je te propose de mettre l'image en background du after et de jouer avec la largeur du viewport pour déterminer la taille du after : https://jsfiddle.net/Undless/yhpccjLh/7/

il reste juste un mini soucis d'espace insécable (mini scroll horizontal quand on approche les 5px de large) mais je pense que ça peut se régler.
Salut,

Je viens d'essayer avec ton idée.

width: calc(50vw - 100px)


J'ai un peu de mal à trouver la bonne formule d'unité. lorsque je laisse les 50vw, j'ai un scroller horizontal. J'ai descendu la valeur. Il y a un scroller qui apparait quand même à un moment.

mon image fait H : 118px V: 184px
Mon viewport est de 1903px. les 184px font env. 9.67% du viewport.

La soustraction correspond à tes 100% du left ? ou à la largeur de l'image ?
Bonjour,
Escuses moi mais wrapper désigne trop de conceptes, pourrais-tu nous donner
ou un code
ou ton URL
ou expliquer simplement le résultat html.css de cette partie de ta page
Tu aura alors une réponse rapide Smiley smile
bonjour Christele,

j'ai mis wrapper pour concilier tout le monde au fait qu'il déterminait la div qui englobe le contenu de ma page, hors header et footer. ça n'a pas marché Smiley lol Pour une fois que je voulais bien énoncer les choses, comme un pro ! Smiley biggol

Dommage que l'insertion d'image ne fonctionne pas... Smiley langue

Ce qu'a fait _laurent ressemble pas mal à ma situation. J'ai ma div principale, et je souhaite mettre une image sur le coté droit de cette div.

moi je suis parti de ça en css :

wrapper.MaClass::after{
	content:url(../images/monImage.jpg);
	position: absolute;
	top: 0;
	right: -187px;

}
Modérateur
En gros le 

width: calc(50vw - 100px)

c'est parceque ma colone principale fait 200px.

Pour prendre tout l'espace dispo à droite (ou à gauche) il faut faire 50vw (donc 50% de l'ecran) moins 50% de ton contenu centrale (ici 50% de 200px = 100px)
C'est pas relatif à la taille de l'image. L'image est en bg et elle disparaîtra petit à petit à mesure qu'on reduit la fenetre.

Ton bloc central fait quelle taille ? il est fixe ? il est fluide ?
Mon bloc central fait 1168.5px.

Il sera fluide normalement ensuite selon les différentes tailles d'écran.
Modérateur
hahahahaha t'arrive a faire des demi pixel toi ? Smiley langue Nan je te parle pas de la taille qui s'affiche dans la console mais de la taille que tu lui donne dans ton CSS Smiley cligne
Modérateur
Ha.
Pourquoi te faire du mal comme ça ? Smiley lol

Et bien t'en prend la moitié et tu remplace le 100px :
width: calc(50vw - 584px);
Meilleure solution
Merci. Smiley cligne

Je ne connaissais pas cette notion cal(). Smiley ravi

j'ai mis 590px; les 584px me donnait un scroller.
Je viens de faire le test avec une image plus large, de 1105px. ça coince. L'image est coutée en deux, la partie gauche apparait seulement.

l'image passe sous la colonne de droite (70%) de mon bloc central. J'ai modifié le css :

wrapper.MaClass::after{
	content:"";
	position: absolute;
	top: 0;
	left:30%;
	height:100%;
	width: calc(50vw - 584px); <-- l'image fait plus de la moitié de l'écran
	background:url("../images/MonImage.jpg") no-repeat scroll;
}
Sujet clos
Aller à