వెబ్ పేజీలు సాధారణంగా ఇన్లైన్ HTML "img" ట్యాగ్ ఉపయోగించి చిత్రాలను జోడిస్తాయి. CSS కోడింగ్ సాధారణంగా చిత్రం యొక్క మూలాన్ని సెట్ చేయదు ఎందుకంటే CSS కంటెంట్ కంటే డిజైన్‌ను నియంత్రిస్తుంది. ఇమేజ్ అస్పష్టత వంటి సాదా HTML లేని లక్షణాలకు CSS మద్దతు ఇస్తుంది. ఉదాహరణకు, మీ వెబ్‌సైట్ హోమ్‌పేజీలో మీ కంపెనీ ప్రధాన కార్యాలయం యొక్క పారదర్శక ఫోటో కనిపించాలనుకుంటే, మీరు దీన్ని CSS ఉపయోగించి సెట్ చేయవచ్చు. CSS శైలులు నేపథ్య చిత్ర ఆస్తిని ఉపయోగించి చిత్ర వనరులను ఎంచుకుంటాయి.
1
మీ HTML ఎడిటర్ లేదా టెక్స్ట్ ఎడిటర్‌తో మీ వెబ్‌సైట్ స్టైల్షీట్ తెరవండి.
2
క్రొత్త శైలిని సృష్టించడానికి కింది కోడ్‌ను షీట్‌లో అతికించండి:
నేపథ్య-చిత్రం: url (మార్గం); నేపథ్య-పునరావృతం: నో-రిపీట్; వెడల్పు: 10 పిక్స్‌; ఎత్తు: 20 పిక్స్‌; }
3
సైట్‌లోని చిత్రం యొక్క URL తో "మార్గం" ని మార్చండి. ఉదాహరణకు, "building.jpg" చిత్రం మీ సైట్ యొక్క "చిత్రాలు" ఫోల్డర్‌లో ఉంటే, కోడ్‌ను దీనికి మార్చండి:
background-image: url (/images/building.jpg); నేపథ్య-పునరావృతం: నో-రిపీట్; వెడల్పు: 10 పిక్స్‌; ఎత్తు: 20 పిక్స్‌; }
4
చిత్రం యొక్క వెడల్పుతో "10" ని మార్చండి మరియు "20" ను చిత్ర ఎత్తుతో భర్తీ చేయండి. ఉదాహరణకు, చిత్రం 200 పిక్సెల్స్ ఎత్తు మరియు 600 పిక్సెల్స్ వెడల్పుతో కొలిస్తే, కోడ్‌ను దీనికి మార్చండి:
background-image: url (/images/building.jpg); నేపథ్య-పునరావృతం: నో-రిపీట్; వెడల్పు: 600 పిక్స్‌; ఎత్తు: 200 పిక్స్‌; }
5
మీరు చిత్రాన్ని చొప్పించాలనుకుంటున్న వెబ్ పేజీని తెరవండి.
6
చిత్రాన్ని చొప్పించడానికి క్రింది కోడ్‌ను జోడించండి:
