8 votes

css background image fit to div

Duplicata possible :
Étirer et mettre à l'échelle une image d'arrière-plan CSS - Avec CSS uniquement

Je veux définir l'image de fond de la div(width : 1000, min-height : 710) et la taille de l'image est de 753 x 308. Lorsque j'essaie de définir l'image, elle ne s'adapte pas à la taille de la div, que dois-je faire ?

.Invitation {
    background-color: transparent;
    background-image: url('../images/form.png');
    background-repeat: no-repeat;
    background-position: left top;
    background-attachment: scroll;
    background-size: 100%;
    width: 1000px;
    height: 710px;
    margin-left: 43px;
}

La classe div est

.content {  
   clear:both;  
   width:1000px;    
   background:#e7e8e9;
   background-image:url('../images/content.jpg');
   background-repeat:no-repeat;
   background-position:left top;
   min-height:710px;
}

et le code est

<div class="content"><div class="Invitation">form goes here....</div></div>

7voto

Marco Godínez Points 529

Essayez quelque chose comme ceci :

CSS

<style type="text/css">
  img.adjusted {
    position: absolute;
    z-index: -1;
    width: 100%;
    top: 0;
    left: 0;
  }
  .Invitation {
    position: relative;
    width: 1000px;
    height: 710px;
    margin-left: 43px;
  }
</style>

HTML

<div class="Invitation">
  This is an example
  <img src="http://files.myopera.com/arshamr/albums/612249/Nature%20(3).jpg" alt="" class="adjusted">
</div>

J'espère que cela vous aidera !

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X