के अनुसार मैं चाहूँगा स्क्रीन रिज़ॉल्यूशन के अनुसार उपयोगकर्ता इसलिए का उपयोग करता है अपने वेबपृष्ठ पृष्ठभूमि छवि बदलने के लिए सक्षम होना: स्क्रीन रिज़ॉल्यूशन से अधिक या 1200 * 600 तो पृष्ठभूमि के बराबर हैसेट पृष्ठभूमि छवि स्क्रीन रिज़ॉल्यूशन
अगर = mybackground.jpg नो-दोहराना या अन्यथा। मैं यह कैसे कर सकता हूँ?
शुद्ध सीएसएस दृष्टिकोण जो बहुत अच्छी तरह से काम करते हैं, पर चर्चा की जाती है here। विशेष रूप से दो तकनीकों की जांच की जाती है और मैं व्यक्तिगत रूप से दूसरा पसंद करता हूं क्योंकि यह CSS3 निर्भर नहीं है, जो मेरी अपनी आवश्यकताओं को बेहतर बनाता है।
यदि आपके/आपके सभी ट्रैफ़िक में CSS3 सक्षम ब्राउज़र है, तो पहली विधि लागू करने के लिए तेज़ और क्लीनर है (सुविधा के लिए यहां श्री ज़ॉइडबर्ग द्वारा कॉपी/पेस्ट किया गया है, हालांकि मैं आगे की पृष्ठभूमि के लिए the source पर जाऊंगा यह क्यों काम करता है)।
सीएसएस का एक वैकल्पिक तरीका जावास्क्रिप्ट लाइब्रेरी jQuery का उपयोग संकल्प परिवर्तनों का पता लगाने और तदनुसार छवि आकार को समायोजित करने के लिए करना है। This article jQuery तकनीक को शामिल करता है और एक लाइव डेमो प्रदान करता है।
Supersized स्थिर पूर्ण स्क्रीन छवियों के साथ-साथ पूर्ण आकार की स्लाइडशो के लिए डिज़ाइन की गई एक समर्पित जावास्क्रिप्ट लाइब्रेरी है।
पूर्ण-स्क्रीन छवियों के लिए एक अच्छी युक्ति उन्हें पहले से सही अनुपात के साथ स्केल करना है। मैं आमतौर पर अन्य तरीकों के लिए supersized.js या 1680x1050 का उपयोग करते समय 1500x1000 के आकार का लक्ष्य रखता हूं, 60-80% के बीच तस्वीरों के लिए जेपीजी गुणवत्ता निर्धारित करता है जिसके परिणामस्वरूप 100kb या उससे कम क्षेत्र में फ़ाइल आकार होता है, गुणवत्ता के साथ समझौता किए बिना ।
हाय एक जावास्क्रिप्ट संस्करण है जो स्क्रीन रिज़ॉल्यूशन के अनुसार पृष्ठभूमि छवि स्रोत को बदलता है। आपको अलग-अलग छवियों को सही आकार में सहेजना होगा।
<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>
मुझे पता है कि यह बहुत पुराना सवाल है लेकिन जवाब देने का विचार किया गया है, यह किसी की मदद करेगा। यदि आप ट्विटर देखते हैं, तो आपको कुछ हासिल करने के लिए कुछ मुश्किल लेकिन शुद्ध सीएसएस दृष्टिकोण मिलेगा।
<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;}
यह पृष्ठभूमि छवियां सभी आकारों के अनुरूप हैं। आईपैड का चित्र दृश्य भी। यह हमेशा केंद्र में छवि समायोजित करें। यदि आप ज़ूम आउट करते हैं; छवि वही रहेगी।
अपने "शरीर पृष्ठभूमि छवि कोड" को हटाना चाहते तो यह कोड पेस्ट करें:
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;
}
में मीडिया प्रश्न यह ठीक जवाब है –
मैं इस एक ही मुद्दा था, लेकिन अब इसके लिए संकल्प मिल गया है।
चाल 1920 * 1200 की वॉलपेपर छवि बनाने के लिए है। जब आप इस वॉलपेपर को विभिन्न मशीनों पर लागू करते हैं, तो विंडोज 7 स्वचालित रूप से सर्वश्रेष्ठ फिट के लिए आकार बदलता है।
आशा यह आपके लिए सब
सेट शरीर सीएसएस मदद करता है:
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;
}
सीएसएस फ़ाइल में रखो:
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; }
यूआरएल छवियों/bg.jpg आपकी पृष्ठभूमि छवि
है
या फिर क्या? क्या आपका मतलब था: 'या फिर पृष्ठभूमि = myalternatebackground.jpg नो-दोहराना' –
सीएसएस 3 – kim366