એક વેબ પૃષ્ઠ ફિટ કરવા માટે એક પૃષ્ઠભૂમિ છબી પટ કેવી રીતે

પૃષ્ઠભૂમિ ગ્રાફિક્સ સાથે તમારી વેબસાઇટ વિઝ્યુઅલ રૂટ આપો

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

જો તમે પૃષ્ઠભૂમિ છબીઓ સાથે કામ કરવાનું શરૂ કરો છો, તો નિઃશંકપણે તમે આ દૃશ્યમાં દોડશો જ્યાં તમે પૃષ્ઠને ફિટ કરવા માટે છબીને ખેંચી શકો છો.

આ ખાસ કરીને પ્રતિષ્ઠિત વેબસાઇટ્સ માટે સાચું છે જે વિશાળ શ્રેણીના ઉપકરણો અને સ્ક્રીન કદ પર વિતરિત કરવામાં આવે છે .

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

પૃષ્ઠની પૃષ્ઠભૂમિમાં ફિટ કરવા માટે છબીને વિસ્તૃત કરવાની શ્રેષ્ઠ રીત, CSS3- નો ઉપયોગ, પૃષ્ઠભૂમિ-કદ માટે છે અહીં એક ઉદાહરણ છે જે પૃષ્ઠના શરીર માટે બેકગ્રાઉન્ડ ઈમેજનો ઉપયોગ કરે છે અને જે 100% જેટલા કદને સુયોજિત કરે છે જેથી તે સ્ક્રીનને ફિટ થવામાં હંમેશાં ખેંચશે.

શરીર {
પૃષ્ઠભૂમિ: url (bgimage.jpg) નો-રીપીટ;
બેકગ્રાઉન્ડ કદ: 100%;
}

Caniuse.com મુજબ, આ મિલકત IE 9+, ફાયરફોક્સ 4+, ઓપેરા 10.5+, સફારી 5+, ક્રોમ 10.5+, અને તમામ મુખ્ય મોબાઇલ બ્રાઉઝર્સમાં કામ કરે છે. આ તમને આજે ઉપલબ્ધ તમામ આધુનિક બ્રાઉઝર્સ માટે આવરી લે છે, જેનો અર્થ છે કે તમારે આ ગુણધર્મનો ભય રાખ્યા વગર ઉપયોગ કરવો જોઈએ કે તે કોઈની સ્ક્રીન પર કાર્ય કરશે નહીં.

જૂનાં બ્રાઉઝર્સમાં સ્ટ્રેચર્ડ બેકગ્રાઉન્ડ બનાવવું

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

નકલી એક વિસ્તૃત પૃષ્ઠભૂમિ છબીનો સૌથી સહેલો રસ્તો સમગ્ર પૃષ્ઠ પર તેને પટકાવવાનો છે. પછી તમે વધારાની જગ્યા સાથે અંત નથી અથવા તમારા લખાણ ખેંચાયેલા વિસ્તારમાં બંધબેસે છે કે ચિંતા કરવાની જરૂર નથી તે કેવી રીતે કરવું તે અહીં છે:

id = "bg" />

1. પ્રથમ, ખાતરી કરો કે તમામ બ્રાઉઝર્સ પાસે 100% ઊંચાઈ, 0 માર્જિન અને 0 અને HTML બોડી તત્વો પર પેડિંગ છે. નીચે આપના HTML દસ્તાવેજના વડામાં નીચે મૂકો:

2. તમે વેબ પૃષ્ઠનો પ્રથમ ભાગ તરીકે પૃષ્ઠભૂમિ બનવા માંગો છો તે છબી ઉમેરો અને તેને "bg" નો id આપો:

3. બેકગ્રાઉન્ડ ઇમેજને ગોઠવો જેથી તે ટોચ પર અને ડાબે સ્થાનાંતરિત થાય અને 100% પહોળી અને 100% ઊંચાઇમાં આવે. તમારી શૈલી શીટમાં આ ઉમેરો:

   img # bg {
   સ્થિતિ: નિશ્ચિત;
   ટોચ: 0;
   ડાબી: 0;
   પહોળાઈ: 100%;
   ઊંચાઈ: 100%;
   }

4. "સામગ્રી" ના id સાથે DIV ઘટકના પૃષ્ઠની અંદર તમારી બધી સામગ્રીને ઉમેરો છબી નીચે DIV ઉમેરો:

   અહીં તમારી બધી સામગ્રી - હેડર, ફકરા વગેરે સહિત

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

   # સામગ્રી {
   સ્થિતિ: સંબંધિત;
   z- અનુક્રમણિકા: 1;
   }

1. પરંતુ તમે પૂર્ણ કરી નથી ઇન્ટરનેટ એક્સપ્લોરર 6 ધોરણો સુસંગત નથી અને હજુ પણ કેટલીક સમસ્યાઓ છે. દરેક બ્રાઉઝરના સીએસએસને છુપાવી ઘણી રીતો છે પરંતુ આઇ 6, પરંતુ સરળ (અને ઓછામાં ઓછી અન્ય સમસ્યાઓ થવાની શક્યતા છે) શરતી ટિપ્પણીઓનો ઉપયોગ કરવો. તમારા દસ્તાવેજનાં માથામાં તમારી સ્ટાઇલશીટ પછી નીચેનાને મૂકો:

2. પ્રકાશિત કરેલી ટિપ્પણીની અંદર, IE 6 ને સરસ રીતે રમવા માટે કેટલીક શૈલીઓ સાથે બીજી સ્ટાઇલ શીટ ઉમેરો:

3. IE 7 અને IE 8 માં તેમજ ચકાસવા માટે ખાતરી કરો. તમને તેમજ તેમને ટેકો આપવા માટે ટિપ્પણીઓને સમાયોજિત કરવાની જરૂર પડી શકે છે જો કે, જ્યારે મેં તેને પરીક્ષણ કર્યું ત્યારે કામ કર્યું હતું.

ઠીક - આ સ્વીકૃત રીતે WAY ઓવરકિલ છે ખૂબ થોડા સાઇટ્સ હવે આઇ 7 અથવા 8 આધાર આપવા માટે જરૂર છે, ખૂબ ઓછી આઇ 6!

જેમ કે, આ અભિગમ જૂનો છે અને તમારા માટે બિનજરૂરી છે. હું અમારા બધા બ્રાઉઝર્સ ખૂબ સારી રીતે મળીને ભજવી તે પહેલાં વધુ મુશ્કેલ વસ્તુઓ હતા તે માટે જિજ્ઞાસા એક મોડેલ તરીકે અહીં વધુ છોડી!

નાના જગ્યા પર એક ખેંચાયેલા પૃષ્ઠભૂમિ છબી Faking

તમે તમારા વેબ પૃષ્ઠ પર એક ડીવીવી અથવા અન્ય તત્વ પર નકલી એક વિસ્તૃત પૃષ્ઠભૂમિ છબી પર સમાન તકનીકનો ઉપયોગ કરી શકો છો. આ એક બીટ ટ્રીકેર છે કારણ કે તમારે ક્યાં તો ચોક્કસ સ્થિતિનો ઉપયોગ કરવો પડશે અથવા તમારા પૃષ્ઠના અન્ય ભાગો માટે વિચિત્ર અંતરની સમસ્યા હશે.

1. પૃષ્ઠ પર છબી મૂકો કે જેને હું પૃષ્ઠભૂમિ તરીકે ઉપયોગ કરવા માંગું છું.

2. શૈલી શીટમાં, છબી માટે પહોળાઈ અને ઊંચાઈ સેટ કરો. નોંધ, તમે પહોળાઈ અથવા ઊંચાઈ માટે ટકાવારીનો ઉપયોગ કરી શકો છો, પરંતુ મને ઊંચાઇ માટે લંબાઈના મૂલ્યો સાથે એડજસ્ટ કરવું સહેલું લાગે છે.

   img # bg {
   પહોળાઈ: 20 મી;
   ઊંચાઈ: 30 ઇએમ;
   }

3. તમારી સામગ્રીને DIV માં "id" સામગ્રી સાથે મૂકો જેમ અમે ઉપર કર્યું છે.

   અહીં તમારી બધી સામગ્રી

4. બેકગ્રાઉન્ડ છબી તરીકે સામગ્રી DIVને સમાન પહોળાઈ અને ઊંચાઈની શૈલી બનાવો:

   div # સામગ્રી {
   પહોળાઈ: 20 મી;
   ઊંચાઈ: 30 ઇએમ;
   }

5. પછી સામગ્રીને છબીની સમાન ઊંચાઈ સુધી ગોઠવો. તેથી જો તમારી છબી 30 મી છે તો તમારી પાસે ટોચની શૈલી હશે: -30મ; સામગ્રી પર 1 નું Z- ઇન્ડેક્સ મૂકવાનું ભૂલશો નહીં.

   # સામગ્રી {
   સ્થિતિ: સંબંધિત;
   ટોચ: -30મ;
   z- અનુક્રમણિકા: 1;
   પહોળાઈ: 20 મી;
   ઊંચાઈ: 30 ઇએમ;
   }

6. પછી IE 6 વપરાશકર્તાઓ માટે -1 ના ઝેડ-ઇન્ડેક્સમાં ઉમેરો, જેમ તમે ઉપર કર્યું છે:

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

અને જો તમારી સામગ્રીનું કદ બદલાય છે, તો તમારે તમારા કન્ટેનર અને પૃષ્ઠભૂમિ છબીનું કદ બદલવાની જરૂર પડશે, અન્યથા, તમે વિચિત્ર પરિણામો સાથે અંત આવશે