એક વેબસાઇટ પર રિસ્પોન્સિવ પૃષ્ઠભૂમિ છબીઓ ઉમેરો કેવી રીતે

CSS નો ઉપયોગ કરીને પ્રતિભાવ ડિઝાઇન છબીઓ કેવી રીતે ઉમેરવું તે અહીં છે

આજે લોકપ્રિય વેબસાઇટ્સ પર જુઓ અને એક ડિઝાઇન સારવાર કે જે તમે જોશો તેટલું જ નહીં, સ્ક્રીન-વિસ્તરેલી પૃષ્ઠભૂમિ છબીઓ. આ ઈમેજોને ઉમેરવાથી પડકારોમાંથી એક શ્રેષ્ઠ પદ્ધતિ છે જે વેબસાઇટ્સને વિવિધ સ્ક્રીન કદ અને ઉપકરણો પર પ્રતિસાદ આપવી જોઇએ - પ્રતિભાવ વેબ ડિઝાઇન તરીકે ઓળખાય છે તે એક અભિગમ

તમારી વેબસાઇટનું લેઆઉટ બદલાતું અને અલગ અલગ સ્ક્રીન માપોથી ભીંગડા હોવાથી, આ પૃષ્ઠભૂમિ છબીઓ તેના કદને તેના આધારે માપવામાં આવ્યાં છે.

વાસ્તવમાં, આ "પ્રવાહી ઈમેજો" જવાબદાર વેબસાઇટ્સના ચાવીરૂપ ટુકડાઓમાંની એક છે (પ્રવાહી ગ્રીડ અને મીડિયા ક્વેરીઝ સાથે). તે ત્રણ ટુકડાઓ શરૂઆતથી પ્રતિષ્ઠિત વેબ ડિઝાઇનનો એક મહત્ત્વનો ભાગ રહ્યો છે, પરંતુ જ્યારે સાઇટ પર પ્રતિભાવ ઇનલાઇન છબીઓ ઉમેરવી હંમેશાં સરળ છે (ઇનલાઇન છબીઓ એ HTML માર્કઅપનાં ભાગ રૂપે કોડિંગ કરેલા ગ્રાફિક્સ છે), તે જ પૃષ્ઠભૂમિ ઈમેજો સાથે (જે CSS પૃષ્ઠભૂમિ ગુણધર્મોનો ઉપયોગ કરીને પૃષ્ઠમાં રીતની છે) ઘણા વેબ ડિઝાઇનર્સ અને ફ્રન્ટ-એન્ડ ડેવલોપર્સને લાંબા સમયથી નોંધપાત્ર પડકાર આપે છે. શાનદાર રીતે, CSS માં "બેકગ્રાઉન્ડ-માપ" પ્રોપર્ટીના ઉમેરાએ આ શક્ય બનાવ્યું છે.

એક અલગ લેખમાં, મેં વિંડોમાં ફિટ કરવા માટે છબીઓને વિસ્તૃત કરવા માટે CSS3 નો પ્રોપર્ટી બેકગ્રાઉન્ડ-સાઇઝનો ઉપયોગ કેવી રીતે કરવો તે આવરી લેવાયો છે, પરંતુ આ પ્રોપર્ટી માટે ઉપયોગમાં લેવા માટે એક વધુ સારું, વધુ ઉપયોગી રીત છે. આ કરવા માટે, અમે નીચેની મિલકત અને મૂલ્ય સંયોજનનો ઉપયોગ કરીશું:

બેકગ્રાઉન્ડ કદ: કવર;

કવર કીવર્ડ ગુણધર્મ બ્રાઉઝરને છબીને ફ્રેમ માપવા માટે કહે છે, ભલે તે વિંડો કેટલું મોટું કે નાનું હોય. છબી સમગ્ર સ્ક્રીનને આવરી લેવા માટે કદમાં છે, પરંતુ મૂળ પ્રમાણ અને પાસા રેશિયો અકબંધ રાખવામાં આવે છે, ઇમેજને વિકૃત થવાથી અટકાવી શકાય છે.

છબીને વિન્ડોઝમાં શક્ય એટલી મોટી રાખવામાં આવે છે જેથી સમગ્ર વિન્ડોની સપાટી આવરી લેવામાં આવે. આનો અર્થ એ છે કે તમારી પાસે તમારા પૃષ્ઠમાં કોઈ ખાલી જગ્યા નથી અથવા છબી પર કોઈપણ વિકૃતિ હશે નહીં, પરંતુ તેનો અર્થ એવો પણ થાય છે કે કેટલીક છબીને સ્ક્રીનના પાસા રેશિયો અને પ્રશ્નમાંની છબીના આધારે બંધ કરવામાં આવી શકે છે. દાખલા તરીકે, બેકગ્રાઉન્ડ-પોઝિશન પ્રોપર્ટી માટે તમે કયા મૂલ્યોનો ઉપયોગ કરો છો તેના આધારે, છબીઓ (ક્યાં ટોચ, તળિયે, ડાબે અથવા જમણે) ની કિનારીઓ, છબીઓ પર કાપી શકાય છે. જો તમે બેકગ્રાઉન્ડને "ટોચે ડાબે" પર ખસેડી શકો છો, તો છબી પરની કોઈપણ વધારાની નીચે અને જમણી બાજુથી આવશે. જો તમે બેકગ્રાઉન્ડ ઈમેજ કેન્દ્રિત કરો છો, તો બધી બાજુઓની સંખ્યા વધુ હશે, પરંતુ તે વધારે ફેલાયેલી હોવાથી, કોઈ એક બાજુ પરની અસર ઓછી સેવા આપશે.

પૃષ્ઠભૂમિ-કદનો ઉપયોગ કેવી રીતે કરવો: કવર;

તમારી પૃષ્ઠભૂમિ છબી બનાવતી વખતે, એક છબી બનાવવી તે એક સારો વિચાર છે જે એકદમ મોટી છે જ્યારે બ્રાઉઝર્સ દ્રશ્ય ગુણવત્તા પર દેખીતા પ્રભાવ વિના નાના છબી બનાવી શકે છે, જ્યારે કોઈ બ્રાઉઝર મૂળ પરિમાણો કરતા મોટા કદ પર ઇમેજને ભીંગડા કરે છે, તો વિઝ્યુઅલ ગુણવત્તાને ભ્રષ્ટ કરવામાં આવશે, ઝાંખી પડી ગઇ છે અને પિક્સેલ કરાય છે. આનાથી નકારાત્મકતા એ છે કે જ્યારે તમે બધી સ્ક્રીન પર વિશાળ છબીઓ પહોંચાતા હોવ ત્યારે તમારું પૃષ્ઠ પ્રભાવ હિટ લે છે

જ્યારે તમે આવું કરો, ડાઉનલોડ ઝડપ અને વેબ ડિલિવરી માટે તે છબીઓને યોગ્ય રીતે તૈયાર કરવા માટે ખાતરી કરો. અંતે, તમારે એક વિશાળ પર્યાપ્ત છબી કદ અને ગુણવત્તા અને ડાઉનલોડ ઝડપે વાજબી ફાઇલ કદ વચ્ચે ખુશ માધ્યમ શોધવાની જરૂર છે.

સ્કેલિંગ બેકગ્રાઉન્ડ ઈમેજોનો ઉપયોગ કરવા માટેની એક સામાન્ય રીત છે જ્યારે તમે તે છબીને પૃષ્ઠની સંપૂર્ણ પૃષ્ઠભૂમિ લેવા માંગો છો, પછી ભલે તે પૃષ્ઠ વિશાળ હોય અને ડેસ્કટૉપ કમ્પ્યુટર પર અથવા ખૂબ નાનામાં જોવામાં આવે અને તે હેન્ડહેલ્ડ, મોબાઇલ પર મોકલવામાં આવે છે ઉપકરણો

તમારી વેબ હોસ્ટ પર તમારી છબી અપલોડ કરો અને તેને પૃષ્ઠભૂમિ છબી તરીકે તમારા CSS માં ઉમેરો:

બેકગ્રાઉન્ડ છબી: url (ફટાકડા-ઓવર-wdw.jpg);
બેકગ્રાઉન્ડ પુનરાવર્તન: કોઈ પુનરાવર્તન;
પૃષ્ઠભૂમિ સ્થિતિ: કેન્દ્ર કેન્દ્ર;
પૃષ્ઠભૂમિ-જોડાણ: નિશ્ચિત;

પ્રથમ બ્રાઉઝરને પ્રિફિક્સ કરેલ સીએસએસ ઉમેરો:

-વેબકીટ-બેકગ્રાઉન્ડ-કદ: કવર;
-મોઝ-બેકગ્રાઉન્ડ-કદ: કવર;
-ઓ-બેકગ્રાઉન્ડ-કદ: કવર;

પછી CSS ગુણધર્મ ઉમેરો:

બેકગ્રાઉન્ડ કદ: કવર;

બદલાતા રહેલા ઉપકરણોને અનુરૂપ વિવિધ છબીઓનો ઉપયોગ કરવો

જ્યારે ડેસ્કટોપ અથવા લેપટોપ અનુભવ માટે જવાબદાર ડિઝાઇન મહત્વપૂર્ણ છે, વેબ ઍક્સેસ કરી શકો છો કે જે ઉપકરણો વિવિધ નોંધપાત્ર વધારો થયો છે, અને સ્ક્રીન કદ મોટી વિવિધ તે સાથે આવે છે

પહેલાં ઉલ્લેખ કર્યો છે, ઉદાહરણ તરીકે, સ્માર્ટફોન પર ખૂબ મોટી પ્રતિભાવ પૃષ્ઠભૂમિ છબી લોડ કરવું એ કાર્યક્ષમ અથવા બેન્ડવિડ્થ-સભાન ડિઝાઇન નથી.

જાણો કે તમે છબીઓને પ્રદર્શિત કરવા માટે મીડિયા ક્વેરીઝનો ઉપયોગ કેવી રીતે કરી શકો છો જે ઉપકરણો પર પ્રદર્શિત થશે, અને મોબાઇલ ડિવાઇસેસ સાથે તમારી વેબસાઇટની સુસંગતતાને વધુ બહેતર બનાવશે.

જેનિફાયર ક્રિનીન દ્વારા મૂળ લેખ. જેરેમી ગીરર્ડ દ્વારા સંપાદિત 9/12/17