web-dev-qa-db-fra.com

Définir l'image de fond en fonction de la résolution de l'écran

J'aimerais pouvoir modifier l'image d'arrière-plan de ma page Web en fonction de la résolution de l'écran utilisée par l'utilisateur.

si la résolution de l'écran est supérieure ou égale à 1200 * 600, alors background = mybackground.jpg no-repeat ou autre. Comment puis-je faire ceci?

imagebackgroundscreenresolution
23
prakasam

Les approches CSS pures qui fonctionnent très bien sont discutées ici . Deux techniques sont examinées en particulier et je préfère personnellement la seconde car elle ne dépend pas de CSS3, ce qui convient mieux à mes propres besoins. 

Si la majeure partie de votre trafic utilise un navigateur compatible CSS3, la première méthode est plus rapide et plus propre à mettre en œuvre (copier/coller par M. Zoidberg dans une autre réponse ici pour plus de commodité, bien que je me rende sur la source pour plus d'informations. contexte sur pourquoi cela fonctionne).

Une méthode alternative à CSS consiste à utiliser la bibliothèque JavaScript jQuery pour détecter les changements de résolution et ajuster la taille de l'image en conséquence. Cet article couvre la technique jQuery et fournit une démonstration en direct. 

Supersized est une bibliothèque JavaScript dédiée conçue pour les images statiques en plein écran ainsi que pour les diaporamas en taille réelle.

Un bon conseil pour les images en plein écran est de les redimensionner au préalable avec un rapport correct. Je recherche normalement une taille de 1500x1000 lors de l’utilisation de supersized.js ou 1680x1050 pour d’autres méthodes, en réglant la qualité jpg pour les photos entre 60 et 80%, ce qui donne une taille de fichier d’environ 100 Ko ou moins, si possible sans compromettre la qualité .

23
Kynth

Supprimez votre "code d'image d'arrière-plan du corps" puis collez ce code: 

html { 
    background: url(../img/background.jpg) no-repeat center center fixed #000; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
9
Mr. Zoidberg

Salut voici une version javascript qui modifie l'image de fond en fonction de la résolution de l'écran. Vous devez avoir les différentes images enregistrées dans la bonne taille.

<html>
<head>    
<title>Javascript Change Div Background Image</title>        
<style type="text/css">    
body {
         margin:0;
         width:100%;
         height:100%;
}

#div1 {   
    background-image:url('sky.jpg');
    width:100%
    height:100%
}    

p {    
    font-family:Verdana;    
    font-weight:bold;    
    font-size:11px;    
}    
</style>    

<script language="javascript" type="text/javascript">
function changeDivImage()    
{   
//change the image path to a string   
var imgPath = new String();        
imgPath = document.getElementById("div1").style.backgroundImage;  

//get screen res of customer
var custHeight=screen.height;
var custWidth=screen.width;

//if their screen width is less than or equal to 640 then use the 640 pic url
if (custWidth <= 640)
    {
    document.getElementById("div1").style.backgroundImage = "url(640x480.jpg)";
    }

else if (custWidth <= 800)
    {
    document.getElementById("div1").style.backgroundImage = "url(800x600.jpg)";
    }

else if (custWidth <= 1024)
    {
    document.getElementById("div1").style.backgroundImage = "url(1024x768.jpg)";
    }

else if (custWidth <= 1280)
    {
    document.getElementById("div1").style.backgroundImage = "url(1280x960.jpg)";
    }

else if (custWidth <= 1600)
    {
    document.getElementById("div1").style.backgroundImage = "url(1600x1200.jpg)";
    }

else {
    document.getElementById("div1").style.backgroundImage = "url(graffiti.jpg)";
     }

    /*if(imgPath == "url(sky.jpg)" || imgPath == "")        
    {            
    document.getElementById("div1").style.backgroundImage = "url(graffiti.jpg)";        
     }
    else        
     {            
     document.getElementById("div1").style.backgroundImage = "url(sky.jpg)";        
     }*/
}    

</script>
</head>
<body onload="changeDivImage()">            

<div id="div1">   

 <p>This Javascript Example will change the background image of<br />HTML Div Tag onload using javascript screen resolution.</p>    
 <p>paragraph</p>
</div>    

<br/>    

</body>
</html>
4
grace-bob

Je sais que c'est une question trop ancienne, mais que je pensais y répondre, cela pourrait aider quelqu'un. Si vous voyez Twitter, vous trouverez quelque chose de très compliqué, mais une approche css pure pour y parvenir.

<div class="background"><img src="home-bg.png" /></div>
Applied CSS
.background {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 200%;
    left: -50%;
    position: fixed;
    width: 200%;}

.background img{
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    min-height: 50%;
    min-width: 50%;
    right: 0;
    top: 0;}

Cette images de fond s'adapte à toutes les tailles. même en mode portrait d'ipad. il ajuste toujours l'image au centre. si vous faites un zoom arrière; l'image restera la même.

3
bhupen

J'ai eu le même problème, mais j'ai maintenant trouvé la solution. 

L'astuce consiste à créer une image de fond d'écran de 1920 * 1200. Lorsque vous appliquez ce papier peint aux différentes machines, Windows 7 est automatiquement redimensionné pour un meilleur ajustement.

En espérant que cela vous aide tous

1
Dave Walker

Définir le corps css sur:

body { 
background: url(../img/background.jpg) no-repeat center center fixed #000; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

1
havefun

Mettre dans un fichier css:

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

URL images/bg.jpg est votre image de fond

0
FMOYOTA