How to Set CSS Background in HTML (In Hindi)
CSS Background Property का प्रयोग Webpages में Background Set करने के लिए किया जाता हैं। CSS Background को नियत्रित करने के लिए कई अतिरिक्त Background Properties भी Provide कराती हैं। Background Body Element में Define किया जाता हैं। जो हमारे पूरे वेबपेज पर Apply हो जाता हैं। तो किसी Particular Element के लिए भी Background Set कर सकते हैं। अपनी पसंद के अनुसार किसी भी प्रकार का Background Set कर सकते हैं। चाहे तो Color Background Set कर सकते हैं। या फिर Image Background भी Set कर सकते हैं।
Setting Background Color
HTML Document के लिए Color Background Set करना चाहते हैं, तो इसके लिए CSS की background-color Property का प्रयोग किया जाता हैं। और इसकी Value में Color को Define किया जाता हैं। Color Value को किसी भी प्रकार से Define कर सकते हैं. आप चाहे तो Color Name Define करें, या Color की Hex Value लिखे, या फिर इसे RGB Value में भी Set कर सकते हैं।
<html>
<head>
<title>CSS Color Background</title><style>p {
background-color: orange;
}
</style>
</head>
<body>
<h1>
This is Heading.
</h1>
<p>
This is Paragraph. You Can Write Your Content Here.
</p>
</body>
</html>
Setting Background Image
Color Background की तरह किसी Particular Image को भी Background बना सकते हैं। Image Background Set करने के लिए CSS को background-image Property का प्रयोग किया जाता हैं। और इसकी Value में Image URL को Define किया जाता हैं।
<!DOCTYPE html>
<html>
<head>
<title>CSS Image Background</title><style>body
{background-image: url(‘tutorialpandit-logo.png’);}
</style>
</head>
<body>
<h1>
This is Image Background.
</h1>
<p>
This paragraph text has an image behing it.
</p>
</body>
</html>
OUTPUT-
Background Image को Repeat करना
अगर Image Size छोटी हैं. तो वह पूरे Background को Cover नहीं करेगी। Image पूरे Background को Cover करें। इसके लिए background-repeat Property का प्रयोग किया जाता हैं। इसकी चार संभावित Values हो सकती हैं।
- Repeat – इस Value के द्वारा Background Vertically (खडी) और Horizontally (आडी) दोनों तरफ बराबर Repeat होगी।
- No-repeat – इस Value के द्वारा Background Image किसी भी तरफ Repeat नहीं होगी।
- Repeat-x – इस Value से Background Image Horizontally Repeat होगी।
- Repeat-y – इस Value से Background Image Vertically Repeat होगी।
<html>
<head>
<title>CSS Image Background</title><style>body {
background-image: url(‘cherry-image.png’);
background-repeat: repeat-x;}
</head>
<body>
<p>
</body>
</html>
</style>
<h1>
This is Image Background.
</h1>
This paragraph text has an image behing it.
</p>
OUTPUT-
Background Image की Position Set करना
Background आपके Content को प्रभावित कर सकता हैं। Background Image की Position को Manually Control करना जरूरी हैं। Background Image की Position को नियत्रित करने के लिए background-position Property का प्रयोग किया जाता हैं। By Default Background Image की Position top-left होती हैं। जब आप इसे Manually Set करते हैं, तो इसमें पहली Value Left Side से दूरी Define करती हैं और दूसरी Value Top से दूरी Define करती हैं।
<html>
<head>
<title>CSS Image Background</title><style>body {
background-image: url(‘cherry-image.png’);
background-position: 100px 100px;
}
</style>
</head>
<body>
<h1>
This is Image Background.
</h1>
<p>
This paragraph text has an image behing it.
</p>
</body>
</html>
OUTPUT-
Background Image की Scroll Setting करना
Background Image की Scroll Setting भी कर सकते हैं। इसके लिए background-attachment Property का प्रयोग किया जाता हैं। इसकी दो संभावित Value होती हैं।
- Fixed – जब आप पेज को ऊपर या नीचे की तरफ Scroll करते हैं। इस Value से Background Image भी ऊपर-नीचे सरकती हैं।
- Scroll – और Scroll Value से Background Image एक जगह ही रहती हैं।
<head>
<title>CSS Image Background</title><style>body {
background-image: url(‘cherry-image.png’);
background-attachment: scroll;
}
</style>
</head>
<body>
<h1>
This is Image Background.
</h1>
<p>
This paragraph text has an image behing it.
</p>
</body>
</html>
Shorthand Background Property
CSS Background की कई Properties के बारे में जाना हैं। सभी Properties को एक साथ भी Define कर सकते हैं। इस तकनीक को Shorthand Method कहते हैं। जब Shorthand Method से Background Image Set करते हैं, तो इनका क्रम पहले से तय रहता हैं। जो इस प्रकार हैं।
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
No comments:
Post a Comment