ఈ రోజుల్లో, ప్రతిస్పందించే నేపథ్య చిత్రాలతో వెబ్‌సైట్‌లకు డిమాండ్ ఉంది. ప్రతిస్పందించే వెబ్‌సైట్‌లు మొబైల్‌లు, టాబ్లెట్‌లు లేదా డెస్క్‌టాప్‌లతో సహా దాదాపు అన్ని పరికరాలలో వినియోగదారులకు ఆదర్శవంతమైన వినియోగదారు అనుభవాన్ని అందిస్తాయి. ప్రతిస్పందించే చిత్రాలు వెబ్‌సైట్ నేపథ్యాన్ని, స్క్రీన్ పరిమాణం మరియు కొలతలను స్వీకరించగలవు. ప్రతిస్పందించే చిత్రాలు నాణ్యత మరియు నిష్పత్తిని నిర్వహించేలా చూస్తాయి. అదనంగా, ప్రతిస్పందించే నేపథ్య చిత్రాలతో వెబ్‌సైట్ త్వరగా లోడ్ అవుతుంది.
ఈ గైడ్ నేపథ్య చిత్రాలను స్క్రీన్ కొలతలకు అనుగుణంగా మార్చడానికి సూచనలను అందిస్తుంది.
బ్యాక్‌గ్రౌండ్ ఇమేజ్‌లను స్క్రీన్ డైమెన్షన్‌లకు ఎలా అడాప్ట్ చేయాలి?
క్రింద ఇవ్వబడిన దశలవారీ సూచనలను అనుసరించడం ద్వారా చిత్రం స్క్రీన్ కొలతలకు అనుగుణంగా ఉంటుంది.
దశ 1: HTML నిర్మాణాన్ని సృష్టించండి
ముందుగా, ఒక HTML స్ట్రక్చర్‌ను సృష్టించండి మరియు ఉపయోగించి బాహ్య స్టైల్ షీట్‌ను జోడించండి <లింక్> HTML యొక్క ప్రధాన విభాగంలో ట్యాగ్ చేయండి. ఆ ప్రయోజనం కోసం, కేవలం ఉంచండి ' ” హెడ్ ట్యాగ్ లోపల. ది ' rel ” ట్యాగ్ HTML డాక్యుమెంట్‌తో ఫైల్ సంబంధాన్ని నిర్దేశిస్తుంది. ది ' href ” ట్యాగ్ CSS ఫైల్ చిరునామాను నిర్దేశిస్తుంది:
< html >
< తల >
< లింక్ rel = 'స్టైల్‌షీట్' href = 'style.css' >
< శీర్షిక > రెస్పాన్సివ్ నేపథ్య చిత్రం శీర్షిక >
తల >
< శరీరం >
-- ఇతర కంటెంట్‌ని జోడించే ప్రాంతం-- >
శరీరం >
html >
దశ 2: CSSని వర్తింపజేయండి
ఇప్పుడు, “కి CSSని వర్తింపజేయండి శరీరం ” విభాగం. ముందుగా, నేపథ్య చిత్రాన్ని పేర్కొనండి. ఆ ప్రయోజనం కోసం, ఉపయోగించండి నేపథ్య చిత్రం 'మరియు' పేర్కొనండి url() చిత్రం ఫైల్ చిరునామాను కలిగి ఉన్న విలువ.
ఆ తర్వాత, 'ని ఉపయోగించండి నేపథ్య చిత్రం 'చిత్ర పరిమాణాన్ని పేర్కొనడానికి, ' నేపథ్య-పునరావృతం 'చిత్రం యొక్క పునరావృతాన్ని సెట్ చేయడానికి ఆస్తి, మరియు' నేపథ్య-అటాచ్మెంట్ ” చిత్రం మిగిలిన పేజీతో స్క్రోల్ అవుతుందో లేదో సెట్ చేయడానికి. చివరగా, సెట్ చేయండి ' మార్జిన్ 'మరియు' పాడింగ్ ' నుండి ' 0 ”:
శరీరం {నేపథ్య చిత్రం: url ( 'test-image.jpg' ) ;
నేపథ్య పరిమాణం: 100 % 100 % ;
/* చిత్రాన్ని స్కేల్ చేయండి 100 % వెడల్పు మరియు 100 % ఎత్తు */
నేపథ్యం-పునరావృతం: నో-రిపీట్;
నేపథ్య-అటాచ్మెంట్: స్థిర;
అంచు: 0 ;
పాడింగ్: 0 ;
/* ఐచ్ఛికం: స్థిర నేపథ్యం */
}
అవుట్‌పుట్
బ్రౌజర్ విండోను కాంట్రాక్ట్ చేయడానికి ముందు ఇది అవుట్‌పుట్:
బ్రౌజర్ కుదింపు తర్వాత:
పై అవుట్‌పుట్ చిత్రం నేపథ్యాన్ని స్క్రీన్ కొలతలకు అనుగుణంగా మార్చిందని నిర్ధారిస్తుంది.
ముగింపు
నేపథ్య చిత్రాలను స్క్రీన్ కొలతలకు అనుగుణంగా మార్చడానికి, ముందుగా, ' వీక్షణపోర్ట్ ” కొలతలు మరియు స్కేలింగ్‌ని నియంత్రించడానికి హెడ్ విభాగంలో. అప్పుడు, HTML నిర్మాణాన్ని సృష్టించి, CSSని వర్తింపజేయండి. CSSలో, 'ని సెట్ చేయండి నేపథ్య పరిమాణం 'ఆస్తి విలువకు' కవర్ చిత్రం యొక్క ఎత్తు మరియు వెడల్పును కొలవడానికి విలువ. ఈ కథనం నేపథ్య చిత్రాలను స్క్రీన్ కొలతలకు అనుగుణంగా మార్చడానికి పూర్తి మార్గదర్శిని అందించింది.