HTML માં પૃષ્ઠભૂમિ છબીઓને બદલવાથી સંબંધિત મુખ્ય સમસ્યા એ છે કે તમામ બ્રાઉઝર્સ અને ઉપકરણો પર છબી યોગ્ય રીતે પ્રદર્શિત થાય છે તેની ખાતરી કરવી મુશ્કેલ બની શકે છે. વધુમાં, જો ઈમેજ ખૂબ મોટી અથવા ખૂબ નાની હોય, તો તે પેજ લોડિંગ સ્પીડ અને પરફોર્મન્સમાં સમસ્યા ઊભી કરી શકે છે. છેલ્લે, HTML માં પૃષ્ઠભૂમિ છબી સેટ કરવાની વિવિધ રીતો છે (દા.ત., CSS અથવા ઇનલાઇન સ્ટાઇલનો ઉપયોગ કરીને), તેથી ચોક્કસ પરિસ્થિતિ માટે યોગ્ય પદ્ધતિનો ઉપયોગ કરવામાં આવ્યો છે તેની ખાતરી કરવી મુશ્કેલ બની શકે છે.
<body style="background-image:url('image.jpg');">
</body>
1. કોડની આ લાઇન HTML બોડી એલિમેન્ટ બનાવે છે.
2. તે શરીર તત્વની પૃષ્ઠભૂમિ છબીને “image.jpg” પર સ્થિત છબી પર પણ સેટ કરે છે.
પૃષ્ઠભૂમિ છબીઓ
HTML માં પૃષ્ઠભૂમિ છબીઓનો ઉપયોગ વેબ પૃષ્ઠ પર દ્રશ્ય રસ ઉમેરવા માટે થઈ શકે છે. તેનો ઉપયોગ સુશોભન તત્વ તરીકે થઈ શકે છે, અથવા તેનો ઉપયોગ માહિતી પહોંચાડવા માટે થઈ શકે છે. CSS માં પૃષ્ઠભૂમિ-ઇમેજ ગુણધર્મનો ઉપયોગ કરીને પૃષ્ઠભૂમિ છબીઓ ઉમેરવામાં આવે છે. આ ગુણધર્મ તમને JPEG અથવા PNG જેવી ઇમેજ ફાઇલનો ઉલ્લેખ કરવાની મંજૂરી આપે છે, જે પૃષ્ઠ પરના અન્ય ઘટકોની પાછળ પ્રદર્શિત થશે. બેકગ્રાઉન્ડ-ઇમેજ પ્રોપર્ટી તમને અન્ય પ્રોપર્ટીઝ જેમ કે બેકગ્રાઉન્ડ-રીપીટ અને બેકગ્રાઉન્ડ-પોઝિશન સેટ કરવાની પણ પરવાનગી આપે છે જે પેજ પર ઇમેજ કેવી રીતે પ્રદર્શિત થાય છે તેનું નિયંત્રણ કરે છે.
હું HTML માં પૃષ્ઠભૂમિ છબી કેવી રીતે બદલી શકું
HTML માં પૃષ્ઠભૂમિ છબી બદલવી એ એક સરળ પ્રક્રિયા છે. આ કરવા માટે, તમારે CSSમાં બેકગ્રાઉન્ડ-ઇમેજ પ્રોપર્ટીનો ઉપયોગ કરવાની જરૂર છે.
પ્રથમ, તમારે તે છબીને વ્યાખ્યાયિત કરવાની જરૂર છે જેનો તમે તમારી પૃષ્ઠભૂમિ તરીકે ઉપયોગ કરવા માંગો છો. તમે ઇમેજ ફાઇલ માટે સંપૂર્ણ અથવા સંબંધિત URL નો ઉપયોગ કરીને આ કરી શકો છો. દાખ્લા તરીકે:
આગળ, તમારા HTML દસ્તાવેજમાં નીચેનો કોડ ઉમેરો:
આ તમારા પૃષ્ઠની પૃષ્ઠભૂમિ છબી તરીકે ઉલ્લેખિત છબીને સેટ કરશે. જો જરૂરી હોય તો તમે વધારાના CSS નિયમોનો ઉપયોગ કરીને સ્થિતિ અને પુનરાવર્તન જેવા અન્ય ગુણધર્મોને પણ સમાયોજિત કરી શકો છો.
