स्टाइल पृष्ठभूमि गुण

विभावना और उपयोग

बैकग्राउंड गुण को छोटे से रूप में सेट करने या परत करने से अधिकतम आठ अलग-अलग पृष्ठभूमि गुण सेट किए जा सकते हैं。

इस गुण के द्वारा, आप निम्नलिखित एक या अधिक गुण (किसी भी क्रम में) सेट कर सकते हैं/परत कर सकते हैं:

DOM गुण CSS गुण
बैकग्राउंडएटेशन background-attachment
backgroundClip बैकग्राउंड-क्लिप
backgroundColor background-color
backgroundImage background-image
backgroundOrigin बैकग्राउंड-ओरिजिन
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize बैकग्राउंड-साइज

ऊपर के गुणों को अलग शैली गुणों के द्वारा भी सेट किया जा सकता है। गैर-विशेषज्ञ लेखकों को अलग गुणों का उपयोग करने की गैर-अनुशासनात्मक सिफारिश की जाती है ताकि अधिक नियंत्रण प्राप्त किया जा सके。

और देखें:

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 + CSS3 में नए गुण

और अधिक उदाहरण

उदाहरण 2

डिव एलेमेंट का पृष्ठभूमि बदलें:

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

आप खुद सिफारिश करें

उदाहरण 3

डॉक्यूमेंट के लिए पृष्ठभूमि रंग सेट करें:

डॉक्यूमेंट.बॉडी.स्टाइल.बैकग्राउंडकलर = "red";

आप खुद सिफारिश करें

उदाहरण 4

डॉक्यूमेंट के लिए पृष्ठभूमि इमेज सेट करें:

डॉक्यूमेंट.बॉडी.स्टाइल.बैकग्राउंडइमेज = "url('img_tree.png')";

आप खुद सिफारिश करें

उदाहरण 5

पृष्ठभूमि इमेज को अव्यवस्थित रखें:

डॉक्यूमेंट.बॉडी.स्टाइल.बैकग्राउंडरीपीट = "repeat-y";

आप खुद सिफारिश करें

उदाहरण 6

पृष्ठभूमि इमेज को फिक्स्ड (नहीं रोल) रखें:

डॉक्यूमेंट.बॉडी.स्टाइल.बैकग्राउंडएटेशन = "fixed";

आप खुद सिफारिश करें

उदाहरण 7

पृष्ठभूमि इमेज की स्थिति बदलें:

डॉक्यूमेंट.बॉडी.स्टाइल.बैकग्राउंडपोजीशन = "टॉप राइट";

आप खुद सिफारिश करें

उदाहरण 8

डॉक्यूमेंट के पृष्ठभूमि एट्रिब्यूट का मूल्य वापस देता है:

डॉक्यूमेंट.बॉडी.स्टाइल.बैकग्राउंड;

आप खुद सिफारिश करें

ब्राउज़र समर्थन

बैकग्राउंड यह CSS1 (1996) की विशेषता है।

सभी ब्राउज़र इसे पूरी तरह से समर्थित करते हैं:

च्रोम एज फायरफॉक्स सैफारी ओपेरा IE
च्रोम एज फायरफॉक्स सैफारी ओपेरा IE
समर्थन समर्थन समर्थन समर्थन समर्थन समर्थन

टिप्पणी

CSS3 (1999) में तीन नए एट्रिब्यूट जोड़े गए: