Rendre responsive une image ajoutée sur le block panier de la home (thème défaut 1.6)

[Col&gram]

Bonsoir,

 

Je souhaite rendre responsive une image que j'ai ajouté sur le block panier, sur la home.

Je travaille sur une copie du thème bootstrap, version 1.6.0.11.

 

J'ai essayé avec ce code dans le blockcart.css sans succès :

#img {
max-width: 100%;
height: auto;
}

Voici le code qui insère l'image en question, toujours dans le blockcart.css, soit juste au début :

#header .shopping_cart {
  background-image: url(http://localhost/sh/themes/bootstrapmodifie/img/panier.png);
  background-repeat: no-repeat;
  background-position: center left;
  position: relative;
  float: right;
  padding-top: 120px; }

En passant j'ai une seconde question : pourquoi si je met un chemin d'image court (../img/panier.png) ça ne fonctionne pas (l'image est bien dans le dossier img du thème). Ca ne fonctionne pas non plus si je met l'image dans le dossier du module, que ce soit dans le thème ou dans le dossier "mère".

 

Merci.

Edited February 14, 2015 by bcd (see edit history)

[fred-vinapresta]

Bonjour, c'est un background votre image, donc on ne peux pas lui applique de width.

 

Vous pouvez modifier le css par: 

#header .shopping_cart {
  background-image: url(http://localhost/sh/themes/bootstrapmodifie/img/panier.png);
  background-repeat: no-repeat;
  background-position: center fixed;
  -webkit-background-size: cover; 
  background-size: cover; 
  position: relative;
  float: right;
  padding-top: 120px; }

[Col&gram]

Bonjour,

 

Merci pour cette réponse mais ça ne va pas pour ce que je veux faire : mon image ne doit pas couvrir l'espace alloué au panier mais venir se placer à côté.

 

Un dessin vaut mieux qu'un grand discours :

 

http://img15.hostingpics.net/pics/596516header.jpg

 

Comme la taille de l'image ne se redimentionne pas en fonction de la taille d'écran, cela crée un décalge pas trés heureux avec le logo qui lui est bien redimensionné automatiquement.

[Col&gram]

Résolu en trichant : j'ai utilisé une image plus petite pour mettre sur le block panier, comme ça elle ne gène plus sur les petits écrans.

 

Pour le lien court ... je ne devais pas avoir les yeux bien ouverts, lol, j'avais zappé quelques ../../ pour remonter jusqu'au dossier images , bon ça servira peut-être à d'autres.