वेबपेज या वेबसाइट की डिजाइनिंग में background style सेट करना काफी महत्वपूर्ण काम है एक web developer के लिए। सभी content web pages के background के ऊपर ही बनाये जाते हैं। Background Style सेट करने के लिए इन चीजों को जानना जरूरी है-
Background-color
Background-image
Background shorthand property
Background-color:
इस style में background का कलर सेट किया जाता है। कलर का कोड कई तरीकों से किया जा सकता है। कलर के pattern को पिछले ब्लॉग में अच्छे से बताया गया है।
body{
background-color:red;
}
Background-image सेट करनाः
Background में इमेज इंसर्ट करने के लिए यह style लगाई जाती है। जैसे body में background image लगाने के लिए कोड
body{
background-image:url('koala.jpg');
}
image लगाने के बाद भी कुछ style set की जाती हैं-
a. Background-repeat
b. Background - attachment
c. Background - position
a. Background -repeat सेट करनाः
Background image लग जाने के बाद repeat property set की जाती है। यह image के दोहराव को सेट करता है। यह तय करता है कि इमेज एक ही बार दिखेगी या बार-बार।
body{
background-image:url("koala.jpg");
background-repeat:no-repeat;
}
b. Background attachment सेट करनाः
Background attachment यह सेट करता है कि बैकग्राउंड इमेज अपनी जगह fix रहेगी या scroll करने पर ऊपर-नीचे होगी।
body{
background-image:url("koala.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
}
c. Background Position सेट करनाः
यह वैकग्राउंड इमेज की position को सेट करता है। जैसे ऊपर दाहिने कोने में सेट करने के लिए-
body{
background-image:url("koala.jpg");
background-repeat:no-repeat;
background-position:right-top;
}