cordova - Background image fix the device size phonegap -


  1.लोड छवि छवि का आकार तय करें (फ़ंक्शन ($) {$ .fn.fullBg = function () {var bgImg = $ (this); समारोह resizeImg () {var imgwidth = bgImg.width (); वर imgheight = bgImg.height (); वर winwidth = $ (विंडो) .width (); वर winheight = $ (विंडो ) .height (); वर widthratio = winwidth / imgwidth; वर heightratio = winheight / imgheight; वर widthdiff = heightratio * imgwidth; वर heightdiff = widthratio * imgheight, अगर (heightdiff & gt; winheight) {bgImg.css ({चौड़ाई: winwidth + 'पिक्सल', ऊंचाई: heightdiff + 'पिक्सल'});} else {bgImg.css ({चौड़ाई: widthdiff + 'पिक्सल', ऊंचाई: winheight + 'पिक्सल'});}} resizeImg (); $ (खिड़की )। Reset (function () {resizeImg ();});}}}} (jQuery)   

2.index.html

  & lt; स्क्रिप्ट टाइप = "टेक्स्ट / जावास्क्रिप्ट" वर्णसेट = "यूटीएफ -8" src = "जेएस / मेन.जेएस" & gt; $ (विंडो) .लोड (फ़ंक्शन () {$ ("# पृष्ठभूमि")। FullBg ();}); & Lt; / स्क्रिप्ट & gt; & Lt; / head & gt; & LT; बॉडी & gt; & Lt; img src = "img / main_bg.png" alt = "" आईडी = "पृष्ठभूमि" / & gt; & Lt; div id = "मुख्य सामग्री" & gt; & Lt;! - आपकी साइट की सामग्री यहां दी गई है - & gt; & Lt; / div & gt; & Lt; / body & gt;   

3 और सीएसएस फ़ाइल इस तरह दिखती

  fullBg {स्थिति: तय; शीर्ष: 0; बाएं: 0; छिपा हुआ सैलाब; } # मुख्य सामग्री {स्थिति: पूर्ण; शीर्ष: 0; बाएं: 0; Z- इंडेक्स: 50; }   

इस छवि को स्क्रॉल करने योग्य है, ताकि वे सभी पक्षों में एक सफेद स्थान देख पाएं

 चित्र प्राप्त करना

 मुझे इस तरह दिखना चाहिए छवि

अग्रिम freinds धन्यवाद प्रत्येक विचार आपका स्वागत है आपका स्वागत है।

इस सीएसएस पृष्ठभूमि की संपत्ति का प्रयास करें, आशा है कि यह आपकी मदद करेगा ... ।

इस तरह अपने शरीर की पृष्ठभूमि div सीएसएस देखने

  & lt; style type = "text / css" & gt; .backgroud {पृष्ठभूमि: url (image.jpg) दोहराएँ; पृष्ठभूमि-आकार: 100%; } & Lt; / style & gt;   

इस तरह HTML देखो

  & lt; body & gt; & Lt; div वर्ग = "पृष्ठभूमि" & gt; & Lt; div class = "content" & gt; - पृष्ठ सामग्री --- & lt; / div & gt; & Lt; / div & gt; & Lt; / body & gt;    

Comments

Popular posts from this blog

excel vba - How to delete Solver(SOLVER.XLAM) code -

jsp - Google line chart x-axis shrinks on transition -

java - Reaching JTextField in a DocumentListener -