Comment mettre en place un Responsive background-image avec CSS

Question

ont deux div classes: un bar qui se niche une menu

background-image est pas correctement mis à l'échelle ou réactif lorsqu'il est placé dans bar classe, et n'apparaît pas quand placé dans la classe menu, où il semble approprié de style en réponse.

En outre, l'image est png, mais est rendue avec des espaces blancs dans l'espace libre ... pourquoi cela pourrait-il être?

Tester maintenant les styles en ligne, mais, dans une feuille de style externe imbriquée dans un dossier 'css', comment l'image peut-elle être pointée dans un dossier 'img' adjacent au chemin du dossier 'css'?

Pour l'arrière-plan ... Réceptivité image doit évoluer à la hauteur Navigateur/largeur, selon le cas ..

CSS actuel:

.bar { 
    position: static; 
    bottom: 0; 
    height: 10%; 
    width: 100%; 
    display: block; 
    margin: 0 auto; 
    text-align: center; 
} 

.menu { 
    display: inline-block; 
    background-image: url("img/menu-bar.png"); 
} 

Answer 1

Vous posez plusieurs questions. Ainsi, dans l'ordre:

Par défaut, background-image sera répétée à sa taille réelle. Si vous le souhaitez à l'échelle, vous devez définir le background-size et probablement désactiver background-repeat. Pour avoir l'échelle de l'image à la taille du conteneur, vous pouvez définir background-size: 100% 100%; ou vous pouvez utiliser background-size: cover pour remplir le conteneur sur la plus petite dimension et couper le reste. L'autre option consiste à utiliser background-size: contain pour éviter d'écrêter l'image. En ce qui concerne le problème de chemin, les chemins d'accès sont toujours relatifs au fichier .CSH. Donc, si, comme vous le dites, la feuille de style se trouve dans un dossier css adjacent au dossier img, vous devez simplement définir le chemin relatif au dossier css.

Vous CSS final pourrait ressembler à ceci:

.menu { 
    display: inline-block; 
    background-image: url(../img/menu-bar.png); 
    background-size: cover; 
    background-color: transparent; 
    background-repeat: no-repeat; 
} 

Notez que j'ai enlevé les guillemets car ils ne sont pas nécessaires. Enfin, si votre transparence ne fonctionne pas, il doit y avoir un problème avec le fichier image lui-même. CSS n'a rien à voir avec la transparence PNG. Assurez-vous que votre éditeur graphique enregistre le fichier PNG avec la transparence appropriée. Utilisez ce lien pour l'image d'arrière-plan réactive.

Answer 2

http://css-tricks.com/perfect-full-page-background-image/