comment faire de la div de l'image d'arrière-plan sensible

Comment faire de cette image sensible

HTML:

<section id="first" class="story" data-speed="8" data-type="background">
    <div class="smashinglogo" id="welcomeimg" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
</section>

CSS:

#first .smashinglogo {background: url(../images/logo1.png)  50% 100px no-repeat fixed;}

OriginalL'auteur User1038 | 2014-02-25

  1. 30

    Utilisation background-size de la propriété à la valeur de 100% auto d'obtenir ce que vous cherchez.

    Par Exemple,

    #first .smashinglogo{
   background-size:100% auto;
}

    Espère que cette aide.

    PS: Que par votre code ci-dessus, vous pouvez supprimer fixed et ajouter 100% auto pour atteindre la sortie.

    Pour répondre à cette question de l'image est l'utilisation de 100% de la surface (trop grand) de toute évidence. BTW, Merci d'avoir essayé
    Cela doit faire à votre image pour étirer adaptée en conséquence. Si vous trouvez 100% trop gros, définissez une valeur en pourcentage, ce qui est idéal pour vos besoins. Puis étirez-le et vérifiez que la sortie de nouveau. Si cela ne fonctionne toujours pas, utilisez le background-size:100% auto; - @Phoenix
    oui, c'est le travail. Merci Encore
    Comment voulez-vous faire de la DIV être à la même hauteur que le fond de l'image?

    OriginalL'auteur Nitesh

  2. 6

    Essayez d'ajouter background-size:cover

    .smashinglogo {background: url(../images/logo1.png)  50% 100px no-repeat fixed;
  background-size: cover;
  height:600px
}

    Vérifier ce tutoriel pour l'article détaillé.

    Image de fond a disparu.
    vérifier la mise à jour de réponse
    La page "de ce tutoriel" n'existe plus.

    OriginalL'auteur Sowmya

  3. 2

    essayez ceci :

    background-size:100% auto;

    ou 

    background-size: cover;

    OriginalL'auteur Iraj

  4. 2

    Au lieu de fixe Utilisation

    max-width:100%;

    cela fonctionne.

    Sortie Finale

    .smashinglogo {
  background: url(../images/logo1.png)  50% 100px no-repeat;
  max-width: 100%;
}

    OriginalL'auteur Alt-Rock Ninja

  5. 1

    Je suis juste résumant avec une réponse qui m'a aidé dans le même sens.

    .smashinglogo {
  max-width: 100%;
background-size:100% auto;
}

.smashinglogo {
  max-width: 100%;
background-size:cover;
}

    Les deux codes ci-dessus a vraiment bien travaillé.

    OriginalL'auteur Neophile

  6. 1
    #first .smashinglogo{
 background-image: url(../images/logo1.png);
 background-repeat: no-repeat;
 background-size: contain;
 background-position: 50% 50%;
}

    essayer cela, il pourrait fonctionner pour vous.

    OriginalL'auteur Mandar Kawtakwar

  7. 0

    Faire une image Réactive il existe de nombreuses façons.

    La règle de Base est d'utiliser % valeur au lieu de pixel valeur. et la deuxième est l'utilisation @media queries pour cible les appareils mobiles et les tablettes.

    Vous pouvez également utiliser CSS3 nouvelle technique pour rendre l'image sensible:

    .img-element: {url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

    vous pouvez lire plus au sujet Sensible de l'image en cliquant sur ce lien.
    http://css-tricks.com/which-responsive-images-solution-should-you-use/

    OriginalL'auteur Kheema Pandey

  8. 0

    Si vous div background-image disparaît lorsqu'ils sont empilés sur de petits appareils (généralement en dessous de 577px en largeur), puis d'ajouter "min-height:310px;" à votre css.

    OriginalL'auteur Jesse Josserand