CSS ব্যাকগ্রাউন্ড প্রপার্টিগুলো এলিমেন্টের ব্যাকগ্রাউন্ড স্টাইল করতে সাহায্য করে। CSS background প্রপার্টি একটি এলিমেন্টের ব্যাকগ্রাউন্ড নির্দিষ্ট করার জন্য একটি শর্টহ্যান্ড। background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin এবং background-attachment মিলে CSS ব্যাকগ্রাউন্ড প্রপার্টিগুলো গঠন করে।
সিনট্যাক্স
CSS background প্রপার্টির সিনট্যাক্স নিম্নরূপ:
Selector { background: /*মান*/ }
উদাহরণ
নিচের উদাহরণগুলো CSS background প্রপার্টি উদাহরণ দেয়:
<!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>
আউটপুট
এটি নিচের আউটপুট দেয়:
