Le redimensionnement d'image d'arrière-plan pour appareil mobile

À droite, puis, j'ai juste joué avec mon site, et l'ajout d'un "nouveau" bannière sur certaines images, j'ai fait cela de la façon la plus simple, je pense, qui est comme suit..

<img style="background:url(images/pic3.jpg)" src="images/new.png" alt="" /></a>

Maintenant cela fonctionne très bien lorsqu'ils sont visualisés sur un ordinateur de bureau comme les images sont déjà à la bonne taille pour le site, mais quand je l'ai vue sur un appareil mobile .png image est réduite, mais pas l'image d'arrière-plan..

Je sais que je suis absent quelque chose à partir de la css, mais comme je suis encore en apprentissage, je ne sais pas exactement ce que son manque, qui est l'endroit où vous les gars à venir..

ici est un peu plus de mon code html..

<div class="thumbnail">
    <a href="#">
        <img style="background:url(images/pic3.jpg)" src="images/new.png" alt="" />
             </a>
                 </div>

Et voici le mobile css en question..

.thumbnails
{
}

    .thumbnails .thumbnail
    {
        border-top: solid 1px #e5e5e5;
        padding-top: 2em;
        margin-top: 2em;
    }

    .thumbnails .first
    {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }

    .thumbnails .thumbnail img
        {
            margin-top: 5px;
            height: 180px;
            margin-right: 8px;
        }

    .thumbnails .thumbnail blockquote
        {

            margin-left: 143px;
        }

Donc en gros, j'ai juste besoin de savoir comment rendre l'image d'arrière-plan à l'échelle vers le bas comme l'image de premier plan (l' .image png)

Je suis sûr que quelqu'un peut l'aider, alors merci beaucoup à l'avance.

EDIT: Voici un rapide violon, de sorte que vous pouvez voir ce qui se passe... http://jsfiddle.net/bBMdp/

Grâce

double possible: stackoverflow.com/questions/7660931/...
Toutes mes excuses si c'est possible, mais je ne comprends pas la question ou la réponse à la question ci-dessus, il est donc nécessaire de demander à moi-même..

OriginalL'auteur Lee Hibberd | 2013-04-05

5

Essayez ceci:
```
.thumbnails .thumbnail img{
    margin-top: 5px;
    height: 180px;
    margin-right: 8px;

    background-size: 100% 100%;

}
```
Ou:
```
.thumbnails .thumbnail img{
    margin-top: 5px;
    height: 180px;
    margin-right: 8px;

    background-size: cover;

}
```
Source(s)

MDN - background-size - CSS

Cela Ne semble pas faire une différence.. merci pour la réponse.
Essayez background-size: cover?
peur de ne pas, toujours rien.. j'ai fait du violon de sorte que vous pouvez voir ce qui se passe.. jsfiddle.net/bBMdp
Ahh, la ligne background propriété est à prendre en compte la background-size de la propriété. J'ai simplement ajouté !important et cela a fonctionné! jsfiddle.net/bBMdp/1
Vous, monsieur, êtes une étoile! Merci beaucoup pour votre aide!

OriginalL'auteur Bill
1

Utilisation background-size:XXpx XXpx; première valeur est de prendre de la largeur et de la deuxième valeur est de prendre de la hauteur.

et c'est pour être placé dans le " .les vignettes .miniature img {section " ouais? comme ci-dessus, cela ne semble pas faire de différence.

OriginalL'auteur Akhil Thesiya
0
```
-webkit-background-style: cover;
-moz-background-style: cover;
-o-background-size: cover;
background-style: cover;
```
Cela permettra de réduire l'échelle de l'arrière-plan, donc c'est jamais assez grand pour couvrir l'ensemble de la zone.

Comme ci-dessus, merci pour la réponse, mais rien ne semble faire une différence pour le moment.

OriginalL'auteur David Goss

Vous devez vous connecter pour publier un commentaire.