সিএসএস ব্যাকগ্রাউন্ড শর্টহ্যান্ড প্রপার্টি একটি উপাদানের জন্য একটি পটভূমি সংজ্ঞায়িত করতে ব্যবহৃত হয়। ব্যাকগ্রাউন্ড-রঙ, ব্যাকগ্রাউন্ড-ইমেজ, ব্যাকগ্রাউন্ড-রিপিট, ব্যাকগ্রাউন্ড-পজিশন, ব্যাকগ্রাউন্ড-ক্লিপ, ব্যাকগ্রাউন্ড-সাইজ, ব্যাকগ্রাউন্ড-অরিজিন এবং ব্যাকগ্রাউন্ড-অ্যাটাচমেন্ট একসাথে CSS ব্যাকগ্রাউন্ড প্রোপার্টি নিয়ে গঠিত।
সিনট্যাক্স
CSS ব্যাকগ্রাউন্ড প্রপার্টির সিনট্যাক্স নিম্নরূপ -
Selector {
background: /*value*/
} উদাহরণ
নিম্নলিখিত উদাহরণগুলি CSS ব্যাকগ্রাউন্ড প্রপার্টি −
চিত্রিত করে<!DOCTYPE html>
<html>
<head>
<style>
body {
background: linen url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") no-repeat 40% 20%;
}
div {
padding: 100px;
background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/green/images/logo.png") no-repeat left;
}
</style>
</head>
<body>
<h2>Learn</h2>
<ul>
<li>Java</li>
<li>C#</li>
<li>Android</li>
<li>iOS</li>
<li>C++</li>
<li>C</li>
</ul>
<div></div>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
table, tr,td{
margin: auto;
border: 2px solid red;
padding: 40px;
}
td {
background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/images/blockchain.png") no-repeat;
}
#demo {
background: rgba(50,100,50,0.4)url("https://www.tutorialspoint.com/images/reactjs.png") no-repeat;
}
table {
background: ivory url("https://www.tutorialspoint.com/images/library-sub-banner.jpg") no-repeat center;
}
</style>
</head>
<body>
<h2>Learning is fun</h2>
<table>
<tr><td></td></tr>
<tr><td id="demo"></td></tr>
</table>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
