CSS background-image প্রপার্টি ব্যবহার করে ওয়েবসাইটের ব্যাকগ্রাউন্ডে ইমেজ সেট করা যায়। এটি রঙ বা গ্রেডিয়েন্টের বিকল্প হিসেবে সৌন্দর্য বাড়ায়।
সিনট্যাক্স
background-image: url('image-url');
ব্যবহারিক উদাহরণ: কফি শপ ব্যানার
.image {
background-image: url('https://images.pexels.com/photos/683039/pexels-photo-683039.jpeg');
height: 250px;
}
.header {
padding-top: 50px;
color: white;
font-size: 20px;
text-align: center;
}
একাধিক ব্যাকগ্রাউন্ড ইমেজ
.image {
background-image: url('icon.png'), url('bg.jpg');
/* প্রথম ইমেজ উপরে, পরেরগুলো পেছনে */
}
Background Size নিয়ন্ত্রণ
- auto (ডিফল্ট): ব্রাউজার নিজে সাইজ নির্ধারণ করে
- contain: পুরো ইমেজ দিেখাবে, কন্টেইনার পূরণ নাও হলে সাদা জায়গা থাকবে
- cover: কন্টেইনার পূরণ করবে, ইমেজ ক্রপ হতে পারে
- length (px, %): নির্দিষ্ট প্রস্থ ও উচ্চতা
.image {
background-size: contain; /* বা cover, বা 200px 200px */
}
Background Position এবং Origin
- background-position: ইমেজের অবস্থান (center, top left, 50% 50% ইত্যাদি)
- background-origin: পজিশনিংের রেফারেন্স বক্স
- border-box: বর্ডার বক্সের সাপেক্ষে
- content-box: কন্টেন্ট বক্সের সাপেক্ষে
- padding-box: প্যাডিং বক্সের সাপেক্ষে (ডিফল্ট)
.image {
border: 10px solid black;
padding: 25px;
background-origin: content-box;
background-repeat: no-repeat;
}
Background Repeat
background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
উপসংহার
background-image, background-size, background-position, background-origin, background-repeat - এই প্রপার্টিগুলো মিলিয়ে পেশাদার ব্যাকগ্রাউন্ড ডিজাইন তৈরি করা যায়। একাধিক ইমেজ লেয়ারিংও সম্ভব।
