Help, j'en peux plus.
Je vous explique. J'ai ça en html :
Code :
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <meta name="viewport" content="width=device-width, user-scalable=no"/>
- <link rel="stylesheet" href="testzombie.css" />
- <title></title>
- </head>
- <body bgcolor="darkgrey">
- <center><div id="mainBG"> </div></center>
- </body>
- </html>
|
et ça en css :
Code :
- .body {
- background-color: darkgrey;
- }
- #mainBG {
- background: url(images/zombie-pc.jpg) no-repeat scroll !important;
- height:100%;
- width:1050px;
- }
- @media screen and (min-device-width: 361px) and (max-device-width: 1024px) {
- #mainBG {
- background: url(images/zombie-tablet.jpg) no-repeat scroll !important;
- width:540px;
- border:1px solid black;
- }
- }
- @media screen and (max-device-width: 360px) {
- #mainBG {
- background: url(images/zombie-phone.jpg) no-repeat no-scroll !important;
- border:1px solid red;
- width:300px;
- }
- }
|
Mon problème est le suivant : sur ma tablette (nexus 7), j'ai bien le bon tour en noir et la bonne image "tablet". Sur mon écran PC j'ai bien juste l'image "pc"...par contre que ce soit sur mon tel android (M7) ou 3GS, j'ai bien la bordure rouge MAIS l'image ne correspond pas et ne veut absolument pas s'afficher proprement.
Du coup, je cale. 3 jours que je galère là dessus alors que je suis quasiment certain que la solution est vraiment simple.
Résultat en ligne visible ici : http://www.niceairsoftequipe.fr/testzombie.html
Franchement, si quelqu'un arrive à m'expliquer le pourquoi de la chose, j'apprécierais.
