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

કોષ્ટકો પર એક છબી પૃષ્ઠભૂમિ ઉમેરવા માટે CSS પૃષ્ઠભૂમિ ગુણધર્મનો ઉપયોગ કરો

તેમના પશ્ચાદભૂના કોષ્ટકોને ભેદ પાડતા વેબપૃષ્ઠ પર બીજું બધું સંબંધિત કોષ્ટકની સામગ્રી પર ભાર મૂકે છે. કોષ્ટકની પૃષ્ઠભૂમિ ઉમેરવા માટે, તમારે તમારા વેબપૃષ્ઠને ટેકો આપતી કેસ્કેડીંગ શૈલી શીટ (CSS) ને ઝટકો કરવાની જરૂર પડશે.

શરૂ કરી રહ્યા છીએ

કોષ્ટકમાં પૃષ્ઠભૂમિ છબી ઉમેરવાનો શ્રેષ્ઠ માર્ગ એ છે કે CSS પૃષ્ઠભૂમિની મિલકતનો ઉપયોગ કરવો. સી.એસ.સી. અસરકારક રીતે લખવા માટે અને અનપેક્ષિત ડિસ્પ્લે અવરોધો ટાળવા માટે તમારી તૈયારી કરવા, તમારી પૃષ્ઠભૂમિ છબી ખોલો અને ઊંચાઇ અને પહોળાઈની નોંધ બનાવો.

પછી તમારા હોસ્ટિંગ પ્રોવાઇડર પર તમારી છબી અપલોડ કરો. છબી માટે URL ને ચકાસો; સૌથી સામાન્ય કારણોમાં છબીઓ શા માટે પ્રદર્શિત થતી નથી કારણ કે URL માં લખાણો છે

તમે તે પગલા પૂર્ણ કર્યા પછી, તમારા દસ્તાવેજનાં માથામાં CSS સ્ટાઇલ બ્લોક મૂકો:

<શૈલી પ્રકાર = "ટેક્સ્ટ / CSS">

1. તમારા ટેબલ પર પૃષ્ઠભૂમિ માટે તમારા CSS લખો અને તેને શૈલી બ્લોકમાં મુકો:

   કોષ્ટક {પૃષ્ઠભૂમિ: url (" છબીમાં URL ") નો-પુનરાવર્તિત; }

2. HTML માં તમારું ટેબલ મૂકો:

   <ટેબલ>
   
   સેલ 1
   સેલ 2
   
   
   સેલ 1
   સેલ 2
   
   

3. છબીની પહોળાઈ અને ઊંચાઈને મેચ કરવા માટે કોષ્ટકની પહોળાઈ અને ઊંચાઈ સેટ કરો

   <ટેબલ શૈલી = " પહોળાઈ: 400 પીએક્સ; ઊંચાઈ: 500 પીએક્સ; "> ...

જો તમારી કોષ્ટકની સામગ્રીઓ છબીની ઊંચાઈ અને પહોળાઈ કરતાં મોટી હોય, તો પૃષ્ઠભૂમિ છબી માત્ર એકવાર પ્રદર્શિત થશે.

જસ્ટ વન ટેબલ પર બેકગ્રાઉન્ડ મૂકો

ઉપરોક્ત સૂચનાઓ પૃષ્ઠ પર દરેક કોષ્ટક પર સમાન પૃષ્ઠભૂમિ છબી સેટ કરશે.

જો તમે ફક્ત ચોક્કસ કોષ્ટકો પર પૃષ્ઠભૂમિને મુકવા માંગો છો, તો તમારે ક્લાસ એટ્રીબ્યુટનો ઉપયોગ કરવાની જરૂર છે.

1. વાંચવા માટે તમારો સીએસએસ બદલો:

   કોષ્ટક. બેકગ્રાઉન્ડ {પૃષ્ઠભૂમિ: url (" છબીમાં URL ") કોઈ પુનરાવર્તિત નથી; }

2. તમે તે પૃષ્ઠભૂમિ છબી મેળવવા માંગો છો તે કોઈપણ ટેબલ પર ક્લાસ બેકગ્રાઉન્ડ ઉમેરો. તે કોષ્ટકો માટે પહોળાઈ અને ઊંચાઈ સેટ કરો

   <ટેબલ વર્ગ = "બેકગ્રાઉન્ડ" શૈલી = "પહોળાઈ: 400 પીએક્સ; ઊંચાઈ: 500 પીએક્સ;> ...

કોષ્ટક પૃષ્ઠભૂમિ છબી પુનરાવર્તન દો

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

પૃષ્ઠભૂમિ: url (" છબીમાં URL ") પુનરાવર્તન ;

મૂળભૂત રીતે પુનરાવર્તન મૂલ્ય ટાઇલ કરી શકાય છે, પરંતુ તમે પુનરાવર્તિત મૂલ્યને પુનરાવર્તન-એક્સ અથવા પુનરાવર્તન-વાયને અનુક્રમે આડા અથવા ઊભી ટાઇલમાં સેટ કરી શકો છો.

કોષ પૃષ્ઠભૂમિ રંગ કોષ્ટક પૃષ્ઠભૂમિ છબીને અવરોધિત કરો

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

માન્યતાઓ

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

તમે ઉપયોગ કરો છો તે કોઈપણ છબી યોગ્ય રીતે લાઇસેંસ પ્રાપ્ત હોવી જોઈએ; ફક્ત એટલા માટે કે તમે વેબ પર ફોટો શોધી શકો છો એનો અર્થ એ નથી કે તમે તેને તમારા પોતાના ઉપયોગ માટે યોગ્ય કરી શકો છો.

કૉપિરાઇટ્સનો આદર કરો!