CSS background properties ব্যাবহার করা হয় element এর background effects নির্দেশ করার জন্য।
যে CSS properties গুলি background effects এর জন্য ব্যাবহার করা হয় তা নিম্নরুপঃ
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background Color
একটি element এর background color নির্দিষ্ট করার জন্য background-color property ব্যাবহার করা হয়।
একটি page এর background color নির্ধারণ করার উপায় নিম্নরুপঃ
body {
background-color: #b0c4de;
}
CSS দ্বারা একটি color প্রায়শ এভাবে নির্ধারিত করা হয়ে থাকেঃ
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
- a color name - like "red"
নিম্নোক্ত উদাহরণে <h1>, <p>, এবং <div> এলিমেন্ট এর ভিন্ন ভিন্ন ব্যাকগ্রাউন্ড কালার রয়েছে
h1 {
background-color: #6495ed;
}
p {
background-color: #e0ffff;
}
div {
background-color: #b0c4de;
}
Background Image
একটি element এর background হিসেবে image ব্যাবহার করতে চাইলে background-image property ব্যাবহার করতে হয়।
স্বাভাবিক ভাবে image টির পুনরাবৃত্তি ঘটে এবং এটি element অংশ কে আবৃত করে।
একটি page এর background image নিম্নরূপে নির্ধারণ করা হয়ঃ
body {
background-image: url("paper.gif");
}
body {
background-image: url("bgdesert.jpg");
}
Background Image - Horizontally বা Vertically পুনরাবৃত্তি
স্বাভাবিক ভাবে background-image property একটি image কে horizontally (আনুভূমিক) এবং vertically (উল্লম্ব) ভাবে পুনরাবৃত্তি করে ।
কিছু কিছু image এর ক্ষেত্রে শুধু horizontal অথবা vertical পুনরাবৃত্তির প্রয়োজন হয়, তা নাহলে তাদেরকে অদ্ভুত দেখায়।
body {
background-image: url("gradient_bg.png");
}
যদি image টি শুধুমাত্র horizontally পুনরাবৃত্তি হত তবে background অনেক চমৎকার দেখাত।
body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; }
Background Image - অবস্থান নির্ধারণ এবং কোন পুনরাবৃত্তি নয়
বিঃ দ্রঃ যখন background image ব্যাবহার করা হয় তখন এমন image ব্যাবহার করা ভাল যা text এর উপর কোন প্রভাব ফেলে না ।
Image কে পুনরাবৃত্তি না করে একবার নির্দিষ্ট করা হয় background-repeat property দ্বারা।
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
উপরে বর্ণীত উদাহরণ গুলিতে background image এবং text কে একই জাইগা তে দেখানো হয়েছে । এখন আমরা image এর জাইগা পরিবর্তন করব যেন image এর জন্য text এর উপর তেমন কোন প্রভাব না পরে।
এখানে background-position property দ্বারা image এর জাইগা ঠিক করা হয়।
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Background - শর্টহ্যান্ড প্রোপার্টি
উপরের উদাহরন গুলি থেকে আপনারা দেখতে পাচ্ছেন যে background কে মনোরম করার জন্য অনেকগুলি properties ব্যাবহার করা হয়েছে।
code কে ছোট করতে সকল properties কে একটি একক properties এ রূপ দেয়া হয়। একে property সংক্ষিপ্ত হয়।
Background এর জন্য shorthand property হচ্ছে "background"।
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
যখন shorthand property ব্যাবহার করা হয় তখন value গুলির ক্রম হচ্ছেঃ
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
যদি কোন property value না থাকে তবে কোন সমস্যা নেই কিন্তু যদি উপস্থিত থাকে তবে উপরোক্ত ক্রম মেনে চলবে।
এই উদাহরণ টি ব্যাবহার করা হয় advanced CSS এর জন্য।
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin-left: 200px;
background: #5d9ab2 url("img_tree.png") no-repeat top left;
}
.container {
text-align: center;
}
.center_div {
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
width: 90%;
background-color: #d0f0f6;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="center_div">
<h1>Hello World!</h1>
<p>This example contains some advanced CSS methods you may not have learned yet.
But, we will explain these methods in a later chapter in the tutorial.</p>
</div>
</div>
</body>
</html>
নিজে নিজে চেষ্টা করো
অনুশীলন ০১ঃ
পেজ এর ব্যাকগ্রাউন্ড রঙ হিসেবে "linen" এবং <h1> এর ব্যাকগ্রাউন্ড রঙ হিসেবে "lightblue" নির্ধারণ করোঃ
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
অনুশীলন ০২ঃ
"paper.gif" নামক ছবিটি পেজ এর ব্যাকগ্রাউন্ড ছবি হিসেবে নির্ধারণ করো
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
অনুশীলন ০৩ঃ
"gradient_bg_vertical.png" নামক ছবিটি ব্যাকগ্রাউন্ড হিসেবে নির্ধারণ করো এবং এটিকে শুধুমাত্র উল্লম্বভাবে পুনরাবৃত্তি ঘটাওঃ
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
অনুশীলন ০৪ঃ
ব্যাকড্রাউন্ড ছবি কেবলমাত্র একবার উপরের দিকে ডান পাশে প্রদর্শন করো
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
অনুলীন ০৫ঃ
ব্যাকগ্রাইন্ড প্রোপার্টি ব্যবহার করে উপরের দিকে ডান পাশে কেবলমাত্র একবার "img_tree.png" নামক ছবিটি প্রদর্শন করোঃ
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
সকল সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টি
| প্রোপার্টি | বর্ণনা |
| background | এক ঘোষণায় সকল ব্যাকগ্রাউন্ড বৈশিষ্ট্য নির্ধারণ করে |
| background-attachment | একটি ব্যাকগ্রাউন্ড ইমেজ নির্দিষ্ট থাকবে বা পেজ এর সাথে স্ক্রল হবে তা নির্ধারণ করে |
| background-color | একটি এলিমেন্ট এর ব্যাকগ্রাউন্ড রং নির্ধারণ করে |
| background-image | একটি এলিমেন্ট জন্য ব্যাকগ্রাউন্ড ইমেজ নির্ধারণ করে |
| background-position | একটি ব্যাকগ্রাউন্ড ইমেজ এর শুরুর অবস্থানে নির্ধারণ করে |
| background-repeat | একটি ব্যাকগ্রাউন্ড ইমেজ কিভাবে পুনরাবৃত্তি হবে তা নির্ধারণ করে |
