সিএসএস ব্যাকগ্রাউন্ড বৈশিষ্ট্য আমাদের উপাদানগুলির পটভূমি স্টাইল করতে সাহায্য করে। CSS ব্যাকগ্রাউন্ড প্রপার্টি হল একটি এলিমেন্টের ব্যাকগ্রাউন্ড নির্দিষ্ট করার জন্য একটি শর্টহ্যান্ড। ব্যাকগ্রাউন্ড-রঙ, ব্যাকগ্রাউন্ড-ইমেজ, ব্যাকগ্রাউন্ড-রিপিট, ব্যাকগ্রাউন্ড-পজিশন, ব্যাকগ্রাউন্ড-ক্লিপ, ব্যাকগ্রাউন্ড-সাইজ, ব্যাকগ্রাউন্ড-অরিজিন এবং ব্যাকগ্রাউন্ড-অ্যাটাচমেন্ট একসাথে CSS ব্যাকগ্রাউন্ড প্রোপার্টি নিয়ে গঠিত।
সিনট্যাক্স
CSS ব্যাকগ্রাউন্ড প্রপার্টির সিনট্যাক্স নিম্নরূপ---
Selector {
background: /*value*/
} উদাহরণ
নিম্নলিখিত উদাহরণগুলি CSS ব্যাকগ্রাউন্ড প্রপার্টি −
চিত্রিত করে<!DOCTYPE html>
<html>
<head>
<style>
#main {
margin: auto;
width: 300px;
background-image: url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#im {
height: 200px;
width: 200px;
background-image: url("https://www.tutorialspoint.com/images/css.png");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div id="main">
<div id="im"></div>
</div>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/hcatalog/images/hcatalog-mini- logo.jpg"),url("https://www.tutorialspoint.com/hbase/images/hbase-mini-logo.jpg"),url("https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 10% 10%, 40% 40%, 90% 10%;
}
</style>
</head>
<body>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয়
