web-dev-qa-db-fra.com

comment rendre l'image d'arrière-plan div sensible

Comment rendre cette image réactive

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;}
htmlcsscss3twitter-bootstrap
18
User1038

Utilisation background-size propriété à la valeur de 100% auto pour réaliser ce que vous recherchez.

Par exemple,

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

J'espère que cela t'aides.

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

36
Nitesh

Essayez d'ajouter background-size:cover

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

Consultez ce tutoriel pour un article détaillé.

7
Sowmya

essaye ça :

background-size:100% auto;

ou

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

essayez ceci, cela pourrait fonctionner pour vous.

2
Mandar Kawtakwar

Au lieu d'une utilisation fixe

largeur max: 100%;

cela fonctionnera.

Sortie finale

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

Je résume simplement 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 ont très bien fonctionné.

1
Neophile

Si vous divisez l'image d'arrière-plan disparaît lorsqu'elle est empilée sur de petits appareils (généralement en dessous de 577 px de largeur), ajoutez "min-height: 310px;" à votre css.

0
Jesse Josserand

Faire une image responsive il y a plusieurs façons.

La règle de base est d'utiliser % valeur au lieu de pixel valeur. et la seconde est d'utiliser @media queries pour cibler les appareils mobiles et les tablettes.

Vous pouvez également utiliser la nouvelle technique CSS3 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 en savoir plus sur l'image responsive en cliquant sur ce lien. http://css-tricks.com/which-responsive-images-solution-should-you-use/

0
Kheema Pandey