Jump to content

image de fond différente selon résolution ecran utilisateur


Recommended Posts

bonjour, je travaille actuellement sur un nouveau thème pour mon site, le fond d'écran sera composé de fleur qui doivent précieusement se placer de façon à ne pas venir perturber le zones de texte.

 

je cherche donc à utiliser une image différente en fonction de la résolution d'écran de l'utilisateur mais ne connaissant que très peu l'encodage, je galère un peu

 

quelqu’un pourrait il me guider?

 

merci d'avance

Link to comment
Share on other sites

Bonjour,

 

Tout d'abord je pense que ton soucis est d'ordre du code css.

Il faudrait utilisé les mediaqueries.

 

sur cette page tu peux voir comment t'en servir 

En gros tu devrais faire un truc comme ça : 

body {
background:url(url de ton image de fond originale);
}
@media screen and (max-width:800px) {
 body {
 background:url(url de ton autre image);
 }
}

en gros quand ta fençetre a une largeur inférieure à 800px, ton fond d'écran change. Essaie avec des couleurs avant histoire de t'adapter

Link to comment
Share on other sites

J'ai abandonné cette méthode les CSS3 n'étant pas pris en charge par les vieux navigateur ce qu'utilise encore beaucoup de mes clients, je me suis donc penché sur du code pho que j'ai mis dans l'index.php, le voici

 

<script type="text/javascript">
    window.onload=function() {
       var sw = screen.width;
      var img = "800_600";
      if (sw>=1024) img = "1024_768";
      if (sw>=1280) img = "1280_1024";
    document.body.style.background="url(themes/polbos/img/fond_site_"+img+".jpg) no-repeat scroll center center"
    }
    </script>

 

mon image s'affiche bien mais petit Hic, malgré la présence du "scroll" elle reste en fixed?????

 

quelqu’un aurait il une idée?

 

merci d'avance

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...