ഒരു വെബ് പേജ് യുക്തമാക്കുന്നതിന് ഒരു പശ്ചാത്തല ഇമേജ് എങ്ങനെ വലിക്കും

പശ്ചാത്തല ഗ്രാഫിക്കലുകളിലൂടെ നിങ്ങളുടെ വെബ്സൈറ്റ് ദൃശ്യ താൽപര്യം നൽകുക

ആകർഷണീയമായ വെബ്സൈറ്റ് ഡിസൈനുകളുടെ ഒരു പ്രധാന ഭാഗമാണ് ചിത്രങ്ങൾ. പശ്ചാത്തല ഇമേജുകളുടെ ഉപയോഗവും ഇതിൽ ഉൾപ്പെടുന്നു. ഉള്ളടക്ക പേജുകളുടെ ഭാഗമായി അവതരിപ്പിക്കുന്ന ചിത്രങ്ങളെ അപേക്ഷിച്ച് ഒരു പേജിന്റെ മേഖലയ്ക്ക് പിന്നിലുള്ള ചിത്രങ്ങളും ഗ്രാഫുകളും ഇവയാണ്. ഈ പശ്ചാത്തല ഇമേജുകൾ ഒരു പേജിൽ ദൃശ്യപരമായ താല്പര്യങ്ങൾ ചേർക്കാനും നിങ്ങൾ ഒരു പേജിൽ നിങ്ങൾ തിരയുന്ന ദൃശ്യ രൂപകൽപ്പന നേടാൻ സഹായിക്കാനും കഴിയും.

നിങ്ങൾ പശ്ചാത്തല ഇമേജുകളുമായി പ്രവർത്തിച്ചാൽ, നിങ്ങൾ ഒരു ചിത്രം പേജിൽ ഉൾപ്പെടുത്താൻ ആഗ്രഹിക്കുന്ന ചിത്രത്തിൽ നിങ്ങൾ സംശയാസ്പദമായി റൺ ചെയ്യും.

വിശാലമായ ഉപകരണങ്ങളും സ്ക്രീൻ വലുപ്പവും കൈമാറുന്ന പ്രതിബിംബ വെബ്സൈറ്റുകൾക്ക് ഇത് പ്രത്യേകിച്ചും സത്യമാണ്.

ഒരു പശ്ചാത്തല ഇമേജ് നീങ്ങാൻ ആഗ്രഹിക്കുന്നത് വെബ് ഡിസൈനർമാർക്ക് വളരെ സാധാരണമായ ഒരു ആഗ്രഹമാണ്, കാരണം ഓരോ ചിത്രത്തിനും ഒരു വെബ് സൈറ്റിന് ഇടം ലഭിക്കുന്നില്ല. ഒരു നിശ്ചിത വലുപ്പം സജ്ജമാക്കുന്നതിനു പകരം, ഇമേജിനെ വലിച്ചിടുന്നത് , ബ്രൌസർ വിൻഡോ എത്ര വലുപ്പമുള്ളതോ ഇടുങ്ങിയതോ ആയ ഒരു പേജിന്റെ സഹായത്തോടെ ഉപയോഗിക്കാൻ സഹായിക്കും.

ഒരു പേജിന്റെ പശ്ചാത്തലത്തിന് അനുയോജ്യമായ ഒരു ചിത്രം, സൈസ് സ്വഭാവം, പശ്ചാത്തല വലുപ്പത്തിൽ ഉപയോഗിക്കുക എന്നതാണ്. ഒരു പേജിന്റെ ബോഡിക്ക് ഒരു പശ്ചാത്തല ഇമേജ് ഉപയോഗിക്കുന്ന ഒരു ഉദാഹരണമാണ് അത് വലുപ്പത്തിൽ 100% വലുപ്പമുള്ളതിനാൽ അത് സ്ക്രീനിൽ ഉൾക്കൊള്ളിക്കാൻ എല്ലായ്പ്പോഴും നീട്ടിരിക്കും.

ശരീരം {
പശ്ചാത്തലം: url (bgimage.jpg) ആവർത്തിക്കില്ല;
പശ്ചാത്തല വലുപ്പം: 100%;
}

Caniuse.com പ്രകാരം, ഈ പ്രോപ്പർട്ടി ഐഇ 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, കൂടാതെ എല്ലാ പ്രധാന മൊബൈൽ ബ്രൌസറുകളിലും പ്രവർത്തിക്കുന്നു. ഇത് ഇന്ന് ലഭ്യമായ എല്ലാ ആധുനിക ബ്രൌസറുകളിലും നിങ്ങളെ ഉൾക്കൊള്ളുന്നു, അതായത് മറ്റൊരാളുടെ സ്ക്രീനിൽ പ്രവർത്തിക്കില്ലെന്ന ഭയം കൂടാതെ നിങ്ങൾ ഈ വസ്തു ഉപയോഗിക്കണം എന്നാണ്.

പഴയ ബ്രൗസറുകളിലെ വിപുലീകൃത പശ്ചാത്തലം എടുക്കുന്നു

IE9 നു മുമ്പുള്ള ഏതെങ്കിലും ബ്രൌസറുകളെ നിങ്ങൾ പിന്തുണയ്ക്കാൻ സാധ്യത വളരെ വളരെ അപൂർവ്വമാണ്, എന്നാൽ ഈ സവിശേഷതയ്ക്ക് IE8 പിന്തുണയ്ക്കില്ലെന്ന ആശങ്ക നിങ്ങൾ അനുമാനിക്കുക. ആ സന്ദർഭത്തിൽ, നിങ്ങൾക്ക് ഒരു നീക്കിയ പശ്ചാത്തലം ഉപയോഗിക്കാനാകും. കൂടാതെ നിങ്ങൾക്ക് Firefox 3.6 (-moz-background-size), Opera 10.0 (-o-background-size) എന്നിവയ്ക്കുള്ള ബ്രൗസർ പ്രിഫിക്സുകൾ ഉപയോഗിക്കാം.

ഒരു നീട്ടിയ പശ്ചാത്തല ചിത്രം വ്യാജമായി ഉപയോഗിക്കുന്നതിനുള്ള എളുപ്പവഴി മുഴുവൻ പേജിലുടനീളം അത് വ്യാപിപ്പിക്കുക എന്നതാണ്. നിങ്ങൾ അധിക സ്ഥലം കൊണ്ട് അവസാനിക്കുന്നില്ല അല്ലെങ്കിൽ നിങ്ങളുടെ ടെക്സ്റ്റ് വിസ്തൃതമായ പ്രദേശത്ത് യോജിക്കുന്ന വിഷമിക്കേണ്ടതുണ്ട്. ഇത് എങ്ങനെ ചെയ്യാമെന്നത് ഇതാ:

id = "bg" />

1. ആദ്യം, എല്ലാ ബ്രൌസറുകളിലും ഒരു 100% ഉയരം, 0 മാർജിൻ, കൂടാതെ 0 Padding, HTML BODY ഘടകങ്ങൾ എന്നിവ ഉണ്ടെന്ന് ഉറപ്പുവരുത്തുക. നിങ്ങളുടെ HTML പ്രമാണ തലയിൽ ഇനി പറയുന്നവ ചെയ്യുക:

2. വെബ് പേജിന്റെ ആദ്യത്തെ മൂലകയായി പശ്ചാത്തലമായി നിങ്ങൾ ആഗ്രഹിക്കുന്ന ഇമേജ് ചേർക്കുക, അതിനെ "bg" ന്റെ ഐഡി നൽകുകയും ചെയ്യുക:

3. പശ്ചാത്തല ഇമേജ് സ്ഥാപിക്കുക , അത് മുകളിലോട്ടും ഇടതുവശത്തും ശരിയാവുകയും 100% വീതിയും 100% ഉയരവുമുള്ളതാണ്. നിങ്ങളുടെ ശൈലി ഷീറ്റിലേക്ക് ഇത് ചേർക്കുക:

   img # bg {
   സ്ഥാനം: ഫിക്സഡ്;
   മുകളിൽ: 0;
   ഇടത്: 0;
   വീതി: 100%;
   ഉയരം: 100%;
   }

4. "ഉള്ളടക്ക" എന്ന ഐഡിയുള്ള ഒരു DIV ഘടകത്തിന്റെ പേജിൽ നിങ്ങളുടെ എല്ലാ ഉള്ളടക്കവും ചേർക്കുക. ചിത്രത്തിന് താഴെ DIV ചേർക്കുക:

   നിങ്ങളുടെ എല്ലാ ഉള്ളടക്കവും ഇവിടെ - തലക്കെട്ടുകൾ, ഖണ്ഡികകൾ തുടങ്ങിയവ ഉൾപ്പെടെ.

   കുറിപ്പ്: ഇപ്പോൾ നിങ്ങളുടെ പേജ് നോക്കുന്നതിൽ രസകരമാണ്. ചിത്രം പ്രദർശിപ്പിക്കണം, പക്ഷേ നിങ്ങളുടെ ഉള്ളടക്കം പൂർണ്ണമായും നഷ്ടപ്പെടും. എന്തുകൊണ്ട്? കാരണം പശ്ചാത്തല ചിത്രം 100% ഉയരവും ഉള്ളടക്ക ഡിവിഷൻ പ്രമാണത്തിൻറെ ഒഴുക്കിനു ശേഷവും ആണ് - മിക്ക ബ്രൗസറുകളും അത് പ്രദർശിപ്പിക്കുകയില്ല.
   
5. നിങ്ങളുടെ ഉള്ളടക്കം പ്രതിഷ്ഠിച്ചുകൊണ്ട് അതിനെ ഒരു z- സൂചികയെ 1 ആയി നിലനിർത്തുക. ഇത് സ്റ്റാൻഡേർഡ്-കംപ്ലൈന്റ് ബ്രൌസറുകളിൽ പശ്ചാത്തല ചിത്രത്തിന് മുകളിലായിരിക്കും. നിങ്ങളുടെ ശൈലി ഷീറ്റിലേക്ക് ഇത് ചേർക്കുക:

   # ഉള്ളടക്കം {
   സ്ഥാനം: ബന്ധു;
   z- ഇൻഡെക്സ്: 1;
   }

1. എന്നാൽ നിങ്ങൾ ചെയ്തില്ല. ഇന്റര്നെറ്റ് എക്സ്പ്ലോറര് 6 എന്നത് മാനദണ്ഡങ്ങള്ക്കനുസൃതമല്ലാത്തതല്ല, ഇപ്പോഴും ചില പ്രശ്നങ്ങളുണ്ട്. ഓരോ ബ്രൌസറിൽ നിന്നും IE6 നെ മറയ്ക്കാൻ ധാരാളം മാർഗ്ഗങ്ങളുണ്ട്, പക്ഷെ ഏറ്റവും എളുപ്പവും (മറ്റ് പ്രശ്നങ്ങൾക്കും കാരണമായേക്കാവുന്ന സാധ്യത) നിബന്ധനകൾ ഉപയോഗിക്കണം. നിങ്ങളുടെ പ്രമാണത്തിന്റെ തലയിൽ നിങ്ങളുടെ സ്റ്റൈൽ ഷീറ്റിനുശേഷം താഴെ കൊടുക്കുക:

2. ഹൈലൈറ്റ് ചെയ്ത അഭിപ്രായത്തിനുള്ളിൽ, മറ്റൊരു സ്റ്റൈൽ ഷീറ്റ് കൂടി ചേർത്ത് IE 6 ലഭിക്കുന്നതിന് നല്ല രീതിയിൽ പ്ലേ ചെയ്യുക:

3. IE 7, IE 8 എന്നിവയിലും പരിശോധിക്കണം. അവയെ പിന്തുണയ്ക്കുന്നതിനായി നിങ്ങൾക്ക് അഭിപ്രായങ്ങൾ ക്രമീകരിക്കേണ്ടി വരാം. എന്നിരുന്നാലും, ഞാൻ പരീക്ഷിച്ചപ്പോൾ ഇത് പ്രവർത്തിച്ചു.

ശരി - ഇത് അഡ്മിഷൻ വഴി ഓവർറൈല്ലാണ്. വളരെ കുറച്ച് സൈറ്റുകൾ IE 7 അല്ലെങ്കിൽ 8 ഇനി പിന്തുണയ്ക്കില്ല, വളരെ കുറഞ്ഞ IE6!

അതുപോലെ, ഈ സമീപനം കാലഹരണപ്പെട്ടുവെന്നതും നിങ്ങൾക്ക് അനാവശ്യമായ സാധ്യതയുമാണ്. ഞങ്ങളുടെ എല്ലാ ബ്രൌസറുകളും ഒന്നിച്ചു ചേരുന്നതിന് മുമ്പ് എത്ര ബുദ്ധിമുട്ടുള്ള കാര്യങ്ങളാണ് എന്നതിനെക്കുറിച്ചുള്ള കൗതുകത്തിന്റെ ഒരു മാതൃകയായി ഞാൻ ഇത് ഇവിടെ ഉപേക്ഷിക്കുന്നു!

ഒരു ചെറിയ സ്ഥലത്ത് ഒരു നീട്ടിയുള്ള പശ്ചാത്തല ഇമേജ് ഫേക്കിംഗ്

ഒരു ഡിവിയിലുടനീളമുള്ള ഒരു നീണ്ട പശ്ചാത്തല ഇമേജ് അല്ലെങ്കിൽ നിങ്ങളുടെ വെബ്പേജിലെ മറ്റൊരു ഘടകം ഉപയോഗിച്ചുള്ള സമാന സാങ്കേതികവിദ്യ നിങ്ങൾക്ക് ഉപയോഗിക്കാം. നിങ്ങളുടെ പേജിന്റെ മറ്റ് ഭാഗങ്ങൾക്ക് വിചിത്രമായ സ്ഥാനനിർണ്ണയം ഉപയോഗിക്കേണ്ടതോ അല്ലെങ്കിൽ വിചിത്രമായ സ്പെയ്സിംഗ് പ്രശ്നങ്ങൾക്കോ ​​ഉള്ളതിനാൽ ഇത് വളരെ ദുർബ്ബലമാണ്.

1. പശ്ചാത്തലമായി ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്ന പേജിൽ ചിത്രം സ്ഥാപിക്കുക.

2. ശൈലി ഷീറ്റിൽ ചിത്രത്തിന്റെ വീതിയും ഉയരവും സജ്ജമാക്കുക. ശ്രദ്ധിക്കുക, വീതിയിലോ ഉയരത്തിലോ ഉള്ള ശതമാനം ഉപയോഗിക്കാം, എന്നാൽ ഉയരത്തിന്റെ നീളം മൂല്യങ്ങൾ ഉപയോഗിച്ച് എനിക്ക് എളുപ്പം ക്രമീകരിക്കുന്നു.

   img # bg {
   വീതി: 20E;
   ഉയരം: 30;
   }

3. നിങ്ങളുടെ ഉള്ളടക്കത്തെ ഐഡി "ഉള്ളടക്കം" ഞങ്ങൾ മുകളിൽ പറഞ്ഞപോലെ ഒരു ഭാഗത്ത് നൽകുക:

   ഇവിടെ നിങ്ങളുടെ എല്ലാ ഉള്ളടക്കവും

4. പശ്ചാത്തല ഇമേജായി അതേ വീതിയും ഉയരവുമുള്ള ഉള്ളടക്ക div:

   div # content {
   വീതി: 20E;
   ഉയരം: 30;
   }

5. തുടർന്ന് ഇമേജ് അതേ ഉയരം വരെയുള്ള ഉള്ളടക്കത്തെ സ്ഥാപിക്കുക. നിങ്ങളുടെ ഇമേജ് 30 ആണ് എങ്കിൽ നിങ്ങൾ മുകളിൽ ഒരു ശൈലി തന്നെ: -30em; ഉള്ളടക്കം 1 ന്റെ z- ഇൻഡക്സ് ഇടുക മറക്കരുത്.

   # ഉള്ളടക്കം {
   സ്ഥാനം: ബന്ധു;
   മുകളിൽ: -30em;
   z- ഇൻഡെക്സ്: 1;
   വീതി: 20E;
   ഉയരം: 30;
   }

6. അതിനുശേഷം, മുകളിൽ പറഞ്ഞതുപോലെ, ഐഇ 6 ഉപയോക്താക്കൾക്ക് -1 ന്റെ z- ഇൻഡെക്സിൽ ചേർക്കുക:

വീണ്ടും, വിശാലമായ ബ്രൌസർ പിന്തുണ ഇപ്പോൾ പശ്ചാത്തല വലിപ്പം കൊണ്ട്, ഈ സമീപനം പുറമേ വളരെ സാധ്യതയും മുമ്പ് ഒരു ഭൂതകാല കാലത്തെ ഒരു ഉൽപ്പന്നം അവതരിപ്പിച്ചു. നിങ്ങൾക്ക് ഈ സമീപനം ഉപയോഗിക്കാൻ ആഗ്രഹമുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് സാധ്യമായ നിരവധി ബ്രൌസറുകളിൽ ഇത് പരീക്ഷിച്ചു നോക്കുക.

നിങ്ങളുടെ ഉള്ളടക്കം വലുപ്പം മാറ്റിയാൽ, നിങ്ങളുടെ കണ്ടെയ്നർ, പശ്ചാത്തല ഇമേജ് എന്നിവയുടെ വലുപ്പം മാറ്റേണ്ടിവരും, അല്ലെങ്കിൽ നിങ്ങൾക്ക് വിചിത്രമായ ഫലങ്ങൾ നൽകാം.