ਸਟਾਈਲ ਬੈਕਗਰਾਊਂਡ ਪ੍ਰਤੀਯੋਗਿਤਾ

ਵਿਵਰਣ ਅਤੇ ਇਸਤਰੀਬਾਜ਼ੀ

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 属性：

object.style.background

设置 background 属性：

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

属性值

值 描述
color 设置元素的背景颜色。
image 设置元素的背景图像。
repeat 设置背景图像的重复方式。
attachment 设置背景图像是固定还是随页面滚动。
position 设置背景图像的起始位置。
size 设置背景图像的大小。
origin 设置背景定位区域。
clip 设置背景图像的绘制区域。
initial 将此属性设置为其默认值。请参阅 initial。
inherit 从其父元素继承此属性。请参阅 inherit。

技术细节

默认值： transparent none repeat scroll 0% 0% auto padding-box border-box
返回值： 字符串，表示元素的背景。
CSS 版本： CSS1 + new properties in CSS3

更多实例

例子 2

更改 DIV 元素的背景：

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) ਵਿੱਚ ਤਿੰਨ ਨਵੇਂ ਪ੍ਰਾਪਰਟੀਆਂ ਜੋੜੀਆਂ ਗਈਆਂ ਹਨ: