IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Distorsion des images en background


Sujet :

CSS

Mode arborescent

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Lycéen
    Inscrit en
    Octobre 2013
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Lycéen
    Secteur : Enseignement

    Informations forums :
    Inscription : Octobre 2013
    Messages : 9
    Par défaut Distorsion des images en background
    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>
    Images attachées Images attachées   

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Distorsion des images après resize.
    Par Invité dans le forum 2D
    Réponses: 3
    Dernier message: 13/10/2011, 18h44
  2. Chargement des images background
    Par guigo dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 23/02/2010, 11h45
  3. Afficher des images sous directX
    Par cyberlewis dans le forum DirectX
    Réponses: 17
    Dernier message: 12/07/2004, 12h07
  4. question sur le format des images ..
    Par vbcasimir dans le forum Langages de programmation
    Réponses: 7
    Dernier message: 28/08/2003, 12h08
  5. [TP][MULTI-PROBLEME]Comment afficher des images pcx
    Par mikoeur dans le forum Turbo Pascal
    Réponses: 7
    Dernier message: 24/10/2002, 13h57

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo