`background-image` প্রোপার্টিতে কমা দিয়ে একাধিক ইমেজ URL দিয়ে একই এলিমেন্টে একাধিক ব্যাকগ্রাউন্ড লেয়ার করা যায়।
উদাহরণ: একাধিক ব্যাকগ্রাউন্ড
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
div {
background-image:
url("https://pngimg.com/uploads/autumn_leaves/autumn_leaves_PNG3613.png"),
url("https://i.picsum.photos/id/256/1200/300.jpg");
background-position: left bottom, left top;
background-repeat: repeat, repeat;
padding: 15px;
}
p { font-size: 18px; }
</style>
</head>
<body>
<h1>CSS-এ একাধিক ব্যাকগ্রাউন্ড</h1>
<div>
<h1>নমুনা টেক্সট</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ipsum dolorem? Adipisci accusantium eveniet necessitatibus beatae est, dolorum nobis minima aliquam atque id at sapiente culpa, alias nulla rem. Aliquam, modi repellendus fugiat dolore, blanditiis praesentium quam doloribus possimus doloremque reprehenderit corporis enim distinctio, ducimus nisi. Voluptatum vel repudiandae omnis.</p>
</div>
</body>
</html>
কোড ব্যাখ্যা
- background-image: url(...), url(...): প্রথম ইমেজটি উপরে লেয়ার হবে (লাস্ট-ইন-ফার্স্ট-আউট)।
- background-position: left bottom, left top: প্রথম ইমেজ নিচে বামে, দ্বিতীয়টি উপরে বামে।
- background-repeat: repeat, repeat: দুটোই রিপিট হবে।
অন্য প্রোপার্টি
`background-size`, `background-attachment`, `background-origin`, `background-clip` — সবই কমা-সেপারেটেড মান নেয়।
