Background & Media queries

Background & Media queries - HTML/CSS - Programmation

Marsh Posté le 05-06-2014 à 21:00:51    

Help, j'en peux plus.
 
Je vous explique. J'ai ça en html :  
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5.   <meta name="viewport" content="width=device-width, user-scalable=no"/>
  6.   <link rel="stylesheet" href="testzombie.css" />
  7.   <title></title>
  8.   </head>
  9.   <body bgcolor="darkgrey">
  10.   <center><div id="mainBG">&nbsp;</div></center>
  11.   </body>
  12. </html>


 
et ça en css :  
 

Code :
  1. .body {
  2.  background-color: darkgrey;
  3. }
  5. #mainBG {
  6.   background: url(images/zombie-pc.jpg) no-repeat scroll !important;
  7.   height:100%;
  8.   width:1050px;
  9. }
  11. @media screen and (min-device-width: 361px) and (max-device-width: 1024px) {
  12. #mainBG {
  13.    background: url(images/zombie-tablet.jpg) no-repeat scroll !important;
  14.  width:540px;
  15.    border:1px solid black;
  16.   }
  17. }
  19. @media screen and (max-device-width: 360px) {
  20. #mainBG {
  21.   background: url(images/zombie-phone.jpg) no-repeat no-scroll !important;
  22.   border:1px solid red;
  23. width:300px;
  24. }
  25. }


 
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.

Reply

Marsh Posté le 05-06-2014 à 21:00:51   

Reply

Marsh Posté le 06-06-2014 à 08:17:46    

1 - degage les !important.
2 - scroll est un parametre par default, tu n'as pas a le specifier.
3 - no-scroll est un parametre invalide, essaye fixed.
 
résultat : http://i58.tinypic.com/2a65b0w.png
 
 
 
 
 
(dsl pour les accents, f*cking clavier qwerty)

Reply

Marsh Posté le 06-06-2014 à 14:30:29    

Merci ! Au top !


Message édité par scorbutic le 06-06-2014 à 14:32:03
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed