స్టైల్ బ్యాక్‌గ్రౌండ్ అట్టరిబ్యూట్

నిర్వచనం మరియు వినియోగం

background అట్టరిబ్యూట్ లఘువుగా సెట్ చేయబడినప్పుడు లేదా తిరిగి పొందబడినప్పుడు అత్యధికంగా ఎనిమిది ప్రత్యేక బ్యాక్‌గ్రౌండ్ అట్టరిబ్యూట్లను సెట్ చేయవచ్చు.

ఈ అట్టరిబ్యూట్ ద్వారా, మీరు కింది అంశాలలో కానీ అన్నింటిలో ఒకటి లేదా అన్నింటినీ సెట్ చేయవచ్చు/తిరిగి పొందవచ్చు (ఏ క్రమంలోనైనా):

DOM అట్టరిబ్యూట్ CSS అట్టరిబ్యూట్
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

పై అమరికలను ప్రత్యేక స్టైల్ అమరికల ద్వారా కూడా సెట్ చేయవచ్చు. ప్రారంభ రచయితలకు మరింత నియంత్రణ కోసం ప్రత్యేక అమరికలను ఉపయోగించండి గాను సిఫారసు చేయబడింది.

మరింత చూడండి:

CSS శిక్షణా పుస్తకం:CSS బ్యాక్‌గ్రౌండ్

CSS3 శిక్షణా పుస్తకం:CSS3 బ్యాక్‌గ్రౌండ్

CSS సందర్శన పుస్తకం:background అమరిక

ఉదాహరణ

డాక్యుమెంట్ యొక్క బ్యాక్‌గ్రౌండ్ స్టైల్ సెట్ చేయుము:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

亲自试一试

పేజీ కింద మరిన్ని TIY ఉదాహరణలు ఉన్నాయి.

సంకేతం

background అమరికను ప్రతిస్పందించుము:

ఆబ్జెక్ట్.style.background

background అమరికను సెట్ చేయుము:

ఆబ్జెక్ట్.style.background = "కలర్ ఇమేజ్ రిపీట్ అటేచ్మెంట్ పోజిషన్ సైజ్ ఓరిజిన్ క్లిప్|ఇనిశియల్|ఇన్హెరిట్"

అమరికల విలువ

విలువ వివరణ
కలర్ సంకేతమను బ్యాక్‌గ్రౌండ్ రంగు సెట్ చేయుము.
ఇమేజ్ సంకేతమను బ్యాక్‌గ్రౌండ్ చిత్రం సెట్ చేయుము.
రిపీట్ బ్యాక్‌గ్రౌండ్ చిత్రం పునరావృతి పద్ధతిని సెట్ చేయుము.
అటేచ్మెంట్ బ్యాక్‌గ్రౌండ్ చిత్రం నిలకడనేది లేదా పేజీ స్క్రోల్ నాటికి సెట్ చేయుము.
పోజిషన్ బ్యాక్‌గ్రౌండ్ చిత్రం ప్రారంభ స్థానాన్ని సెట్ చేయుము.
సైజ్ బ్యాక్‌గ్రౌండ్ చిత్రం పరిమాణాన్ని సెట్ చేయుము.
ఓరిజిన్ బ్యాక్‌గ్రౌండ్ లొకేషన్ ప్రాంతాన్ని సెట్ చేయుము.
క్లిప్ బ్యాక్‌గ్రౌండ్ చిత్రం డ్రాయింగ్ ప్రాంతాన్ని సెట్ చేయుము.
ఇనిశియల్ ఈ అమరికను దాని మూల విలువకు మార్చు. చూడండి ఇనిశియల్.
ఇన్హెరిట్ ఈ అమరికను తన పేరంతా పరిగణించు. చూడండి ఇన్హెరిట్.

సాంకేతిక వివరాలు

మూల విలువ: ట్రాన్స్‌పరెంట్ నాన్ రిపీట్ స్క్రోల్ 0% 0% ఆటో ప్యాడింగ్-బాక్స్ బోర్డర్-బాక్స్
ప్రతిస్పందన విలువ: పదబంధం అనేది సంకేతమను చెప్పుతుంది అనేది మెటాడాట్ యొక్క బ్యాక్‌గ్రౌండ్.
CSS వెర్షన్: CSS1 + CSS3 లో కొత్త అమరికలు

మరిన్ని ఉదాహరణలు

ఉదాహరణ 2

డివ్ మెటాడాట్ యొక్క బ్యాక్‌గ్రౌండ్ మార్చుము:

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

亲自试一试

例子 3

为文档设置背景颜色：

document.body.style.backgroundColor = "red";

亲自试一试

例子 4

为文档设置背景图像：

document.body.style.backgroundImage = "url('img_tree.png')";

亲自试一试

例子 5

将背景图像设置为不重复：

document.body.style.backgroundRepeat = "repeat-y";

亲自试一试

例子 6

将背景图像设置为固定（不会滚动）：

document.body.style.backgroundAttachment = "fixed";

亲自试一试

例子 7

更改背景图像的位置：

document.body.style.backgroundPosition = "top right";

亲自试一试

例子 8

返回文档的背景属性值：

document.body.style.background;

亲自试一试

浏览器支持

background 是 CSS1 (1996) 特性。

所有浏览器都完全支持它：

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
支持 支持 支持 支持 支持 支持

注释

CSS3 (1999) 中添加了三个新属性：