Comment définir une largeur minimale avec la taille de l'arrière-plan

J'ai une image de 1000px X 600px . Je veux l'utiliser en tant que réactif de fond pour un div mais voudrais mettre un minimum la largeur de 1000px en dépit de la taille de la fenêtre du navigateur est.

C'est frustrant, car il ne semble pas être un moyen simple de définir un min. la largeur.

Si j'utilise background-size: cover - pour une raison quelconque, l'image est, par défaut, beaucoup plus grande que 1000px.

s'il vous plaît aider

source d'informationauteur Gregg | 2013-05-21

  1. 17

    Si les media queries sont une option, vous pouvez configurer une requête de support pour le navigateur fenêtres plus petites que 1000px de large.

    En supposant que votre HTML fenêtre d'affichage est réglé:

    <meta name="viewport" content="width=device-width">

    Et votre div est nommé 'bg':

    <div class="bg"></div>

    Dans votre CSS:

    .bg {
    width: auto; /* Scale the div to the parent width */
    height: 900px; /* The div needs some height to be visible */
    background-image: url(bg.png); /* This is your background image */
    background-size: 100%; /* Always size the image to the width of the div */
    background-position: top; /* Position the image to the top center of the div */
}

/* For any viewports less than 1000px wide */
@media (max-width: 1000px) {

    .bg {
        background-size: 1000px 600px; /* Force the image to its minimum width */
    }

}
  2. 3

    J'ai eu le même problème. Le code suivant a travaillé pour moi. J'ai juste eu à ajouter une largeur min dans le même élément. Ici j'ai simplement utilisé l'élément html, je suppose qu'il serait plus classique de l'utilisation de l'élément de corps de

         /* CSS Style Sheet */

 html    { background-image:url(example.JPG);
                    background-size:cover;
                    min-width:1000px;}

    J'espère que cette aide,

  3. 3

    Il y a maintenant une option pour background-size à seulement l'échelle de l'image jusqu'à ce que l'image a rencontré hauteur/largeur. De cette façon, vous n'avez pas à mettre un min-width ou quoi que ce soit.

    Dans votre CSS:

    body {
  background-size: cover;
}

    Référence: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values