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

Je voudrais être en mesure de changer ma page d'arrière-plan de l'image en fonction de la résolution de l'écran que l'utilisateur utilise donc:

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 cela?

ou sinon quoi? vouliez-vous dire: "ou d'autre fond = myalternatebackground.jpg no-repeat'
demandes des médias en css3

InformationsquelleAutor prakasam | 2010-06-30

23

Pur CSS approches qui fonctionnent très bien, sont discutés ici. Deux techniques sont examinées, en particulier, et personnellement, je préfère la seconde, car il ne CSS3 dépendants, ce qui convient à mes propres besoins.

Si la plupart de votre trafic a un CSS3 navigateur capable de, 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 j'avais visite la source pour de plus amples informations sur pourquoi cela fonctionne).

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

Supersized est dédié bibliothèque JavaScript conçu pour statique plein écran des images ainsi que la taille des diaporamas.

Une bonne astuce pour les images en plein écran est à mettre à l'échelle avec un ratio correct à l'avance. J'ai l'habitude de viser une taille de 1500x1000 lors de l'utilisation de supersized.js ou 1680x1050 pour les autres méthodes, la définition de la jpg de qualité pour des photographies d'entre 60-80%, donnant lieu à une taille de fichier dans la région de 100ko ou moins si possible sans compromettre la qualité trop.

InformationsquelleAutor Kynth

Supprimer votre "corps d'arrière-plan de l'image de code" 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;
}

c'est très bien de répondre

InformationsquelleAutor Mr. Zoidberg

Salut voici une version javascript qui change l'image de fond src selon 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>

InformationsquelleAutor grace-bob

3

Je sais, c'est trop vieille question, mais pensé pour répondre, il pourrait aider quelqu'un. Si vous voyez twitter, vous trouverez quelque chose de très délicat, mais pur css approche pour atteindre cet objectif.
```
<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 d'arrière-plan s'adapte à toutes les tailles. même portrait de l'ipad. il a toujours ajuster l'image au centre. si vous zoomez; image reste la même.

InformationsquelleAutor bhupen
1

J'ai eu ce même problème mais ont maintenant trouvé la résolution pour elle.

L'astuce consiste à créer une image de fond d'écran de 1920*1200.
Lorsque vous appliquez ensuite ce fond d'écran pour les différentes machines, Windows 7 redimensionne automatiquement pour le meilleur ajustement.

Espère que cela vous aide tous les

InformationsquelleAutor Dave Walker

Ensemble du corps css :

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;

}

InformationsquelleAutor havefun

Mettre dans le 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 d'arrière-plan

InformationsquelleAutor FMOYOTA

Vous devez vous connecter pour publier un commentaire.