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