Sheikh Mahfuzur Rahman
সিএসএস-থ্রি'তে কিছু নতুন ব্যাকগ্রাউন্ড প্রপার্টি যোগ করা হয়েছে, যার মাধ্যমে ব্যাকগ্রাউন্ড এলিমেন্টকে আরও ভালোভাবে নিয়ন্ত্রণ ও স্টাইল করা যায়।
এই চ্যাপ্টারে আপনারা নিচের ব্যাকগ্রাউন্ড প্রপার্টিগুলো সম্পর্কে জানবেনঃ
- background-size
- background-origin
- background-clip
কিভাবে মাল্টিপল (একাধিক) ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা যায় তা নিয়েও এখানে আলোচনা করা হবে।
ব্রাউজার সাপোর্ট
নিচের তালিকায় প্রথম যে ব্রাউজার ভার্শনগুলো ব্যাকগ্রাউন্ড প্রপার্টিকে পুরোপুরিভাবে সাপোর্ট করে তা দেয়া হলো। -webkit-, -moz-, অথবা -o- এর সাথে যুক্ত ভার্শন নম্বরগুলো প্রিফিক্সসহ যেসব ভার্শন কাজ করে তার তালিকা প্রকাশ করে।
| Property |  |
 |
 |
 |
 |
| background-image (একাধিক ব্যাকগ্রাউন্ড সহ) |
9.0 |
4.0 |
3.6 |
3.1 |
11.5 |
| background-size |
9.0 |
4.0 |
4.0 |
4.1 |
10.5 |
| background-origin |
9.0 |
1.0 |
4.0 |
3.0 |
10.5 |
| background-clip |
9.0 |
4.0 |
4.0 |
3.0 |
10.5 |
সিএসএস-থ্রি background-size প্রপার্টি
background-size প্রপার্টি ব্যাকগ্রাউন্ড ইমেজের সাইজ বা আকার ঠিক করে। সিএসএস-থ্রি প্রকাশের আগে ব্যাকগ্রাউন্ড ইমেজের আকার ইমেজের প্রকৃত আকার দিয়ে নির্ধারণ করা হতো। সিএসএস-থ্রি'তে ব্যকগ্রাউন্ড ইমেজের আকার ঠিক করে দেয়া সম্ভব যা আমাদের বিভিন্ন ক্ষেত্রে ব্যাকগ্রাউন্ড ইমেজগুলোকে পুনরায় ব্যবহারের সুযোগ করে দেয়।
আপনি সাইজটি পিক্সেল বা পার্সেন্টেজে নির্ধারণ করে দিতে পারেন। আপনি যদি সাইজটি পার্সেন্টেজে ঠিক করে দেন, সাইজটি প্যারেন্ট এলিমেন্টের প্রস্থ ও উচ্চতা এর সাপেক্ষে নির্ধারিত হবে।
১) উদাহরণ
একটি ব্যাকগ্রাউন্ড ইমেজকে রিসাইজ করা
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid black;
background:url(img_flwr.gif);
background-repeat: no-repeat;
padding:15px;
}
#example2 {
border: 1px solid black;
background:url(img_flwr.gif);
background-size: 100px 80px;
background-repeat: no-repeat;
padding:15px;
}
</style>
</head>
<body> <p>Original background-image:</p> <div id="example1"> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> <p>Resized background-image:</p> <div id="example2"> <h2>Lorem Ipsum Dolor</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </body> </html>
২) উদাহরণ
পুরো কন্টেন্ট এরিয়াতে ব্যাকগ্রাউন্ড ইমেজকে ছরিয়ে দেয়াঃ
div {
background: url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}
সিএসএস-থ্রি ব্যাকগ্রাউন্ড-অরিজিন প্রপার্টি
background-origin প্রপার্টি ব্যাকগ্রাউন্ড ইমেজের অবস্থান (positioning) নির্ধারণ করে দেয়। ব্যকগ্রাউন্ড ইমেজটি content-box, padding-box অথবা border-box এরিয়াতে বসানো যায়।
উদাহরণ
ব্যাকগ্রাউন্ড ইমেজকে content-box এ স্থাপন করাঃ
div {
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
}
সিএসএস-থ্রি মাল্টিপল ব্যাকগ্রাউন্ড ইমেজ
সিএসএস-ত্রি আপনাকে একটি এলিমেন্টে একাধিক ব্যাকগ্রাউন্ড ইমেজ ব্যবহারের সুযোগ করে দেয়।
উদাহরণ
এলিমেন্টের জন্য দু'টি ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা যাকঃ
body {
background: url(img_tree.gif), url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}
সিএসএস-থ্রি ব্যাকগ্রাউন্ড প্রপার্টিসমূহ
- background-clip - এটি ব্যাকগ্রাউন্ড ইমেজের পেইন্টিং এরিয়া নির্ধারণ করে।
- background-origin - এটি ব্যকগ্রাউন্ড ইমেজের পজিশনিং (অবস্থান) এরিয়া নির্ধারণ করে
- background-size - এটি ব্যাকগ্রাউন্ড ইমেজের সাইজ ঠিক করে।
