it-swarm.com.de

Hintergrundbild entsprechend der Bildschirmauflösung einstellen

Ich möchte in der Lage sein, das Hintergrundbild meiner Webseite entsprechend der vom Benutzer verwendeten Bildschirmauflösung zu ändern:

wenn die Bildschirmauflösung größer oder gleich 1200 * 600 ist, dann background = mybackground.jpg no-repeat oder sonst. Wie kann ich das machen?

23
prakasam

Reine CSS-Ansätze, die sehr gut funktionieren, werden diskutiert hier . Insbesondere werden zwei Techniken untersucht, und ich persönlich bevorzuge die zweite, da sie nicht von CSS3 abhängt, was meinen eigenen Bedürfnissen besser entspricht. 

Wenn der Großteil Ihres gesamten Datenverkehrs über einen CSS3-fähigen Browser verfügt, ist die erste Methode schneller und sauberer zu implementieren (Kopieren/Einfügen von Herrn Zoidberg in einer anderen Antwort hier zur Vereinfachung), obwohl ich die Quelle für weitere Informationen besuchen möchte Hintergrund, warum es funktioniert).

Eine Alternative zu CSS ist die Verwendung der JavaScript-Bibliothek jQuery, um Auflösungsänderungen zu erkennen und die Bildgröße entsprechend anzupassen. Dieser Artikel behandelt die jQuery-Technik und bietet eine Live-Demo. 

Supersized ist eine dedizierte JavaScript-Bibliothek, die sowohl für statische Vollbild-Bilder als auch für Diashows in voller Größe konzipiert ist.

Ein guter Tipp für Vollbild-Bilder ist es, sie vorher mit einem korrekten Verhältnis zu skalieren. Normalerweise strebe ich eine Größe von 1500x1000 an, wenn Sie supersized.js oder 1680x1050 für andere Methoden verwenden. Die JPG-Qualität für Fotos sollte zwischen 60 und 80% liegen, was zu einer Dateigröße von 100 kb oder weniger führt, wenn möglich, ohne die Qualität zu sehr zu beeinträchtigen .

23
Kynth

Lösche deinen "Body Background Image Code" und füge diesen Code ein:

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

Hallo heres eine Javascript-Version, die das Hintergrundbild src entsprechend der Bildschirmauflösung ändert. Sie müssen die verschiedenen Bilder in der richtigen Größe speichern.

<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

Ich weiß, dass es eine zu alte Frage ist, aber der Gedanke, sie zu beantworten, könnte jemandem helfen. Wenn Sie Twitter sehen, werden Sie etwas sehr kniffliges, aber reines CSS-Verfahren finden, um dies zu erreichen.

<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;}

Diese Hintergrundbilder passen zu allen Größen. sogar porträt von ipad. Es passt das Bild immer in der Mitte an. wenn Sie herauszoomen; Bild bleibt gleich.

3
bhupen

Ich hatte das gleiche Problem, habe aber jetzt die Lösung dafür gefunden. 

Der Trick besteht darin, ein Hintergrundbild von 1920 * 1200 zu erstellen. Wenn Sie dieses Hintergrundbild dann auf die verschiedenen Computer anwenden, wird die Größe von Windows 7 automatisch angepasst, um eine optimale Anpassung zu erzielen.

Hoffe das hilft euch allen

1
Dave Walker

Stellen Sie body css auf:

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

In css-Datei ablegen:

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 ist dein Hintergrundbild

0
FMOYOTA