Discussion :

[raaph]

Bonjour,

J'ai un petit souci avec une image (quadrilatère transparent) qui se déforme en arrière-plan suivant le texte qu'elle contient. J'aimerai obtenir comme résultat l'illustration ci-jointe (issue de la maquette) or j'ai le côté droit est tout simplement vertical au lieu d'être penché.

J'utilise pour cela deux div, et en jouant sur les margin et padding, le résultat n'est pas celui attendu (capture d'écran N°2).

Une idée pour trouver la solution ?

Merci.

Code CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
div.quadri-left {
	width:100%;
	min-height: 16em;
	background: url("uploads/2014/12/quadri-left.png") no-repeat center center;
	background-size: cover;
	padding: 2em 1em 1em;
	margin:0 auto 2em auto;
	float:left;
	line-height: 2em;
}
div.quadri-left-section {
	padding: 4em;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Code HTML

Code html :

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

1
2
3
4
<div class="quadri-left">
<div class="quadri-left-section">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt orci at lacus suscipit consectetur. Pellentesque mattis est a est euismod facilisis. Nunc eu tempor nulla. Nam faucibus turpis nibh, id venenatis nisi porta malesuada. Mauris a ante rhoncus, malesuada justo nec, pharetra metus. Pellentesque eu mi nec elit condimentum lacinia. Nullam eu diam porttitor, suscipit odio id, vestibulum eros. Nullam non interdum urna. Fusce metus lorem, tempor sit amet vulputate id, aliquet non erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. </div>
</div>

[Invité]

Bonjour,

Code css :

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

background-size: 100% 100%;

[miss_socrates]

Je ne vois pas pourquoi mettre 2 div: si j'ai bien compris, il s'agit d'une image de fond avec du texte au-dessus ?
Il suffit de placer le texte dans une div et l'image en background-image.
Sinon, les 2 div ne vont pas se superposer et la distorsion vient de ce qu'elles se "bousculent" pour prendre chacune sa place...