CSS পটভূমি বৈশিষ্ট্য (CSS background properties) [বাংলায় CSS মাস্টার ক্লাস]:
Background-color: এই বৈশিষ্ট্যটি একটি উপাদানের পটভূমির রঙ সেট করে। কীওয়ার্ড বা হেক্সাডেসিমেল মান ব্যবহার করে একটি রঙ নির্দিষ্ট করে, আপনি প্রাণবন্ত ব্যাকগ্রাউন্ড তৈরি করতে পারেন যা আপনার সামগ্রিক নকশার পরিপূরক। এটি একটি উপাদানে একটি পটভূমি যোগ করার সবচেয়ে সহজ উপায় এবং এটি নিজে থেকে বা অন্যান্য ব্যাকগ্রাউন্ড বৈশিষ্ট্যের সাথে একত্রে ব্যবহার করা যেতে পারে। উদাহরনঃ background-color: aqua;
ব্যাকগ্রাউন্ড-ইমেজ: আপনার ব্যাকগ্রাউন্ডগুলিকে পরবর্তী স্তরে নিয়ে যেতে, আপনি একটি উপাদানের পটভূমি হিসাবে একটি চিত্র প্রয়োগ করতে ব্যাকগ্রাউন্ড-ইমেজ বৈশিষ্ট্য ব্যবহার করতে পারেন। এটি আপনার ডিজাইনে টেক্সচার, প্যাটার্ন, গ্রেডিয়েন্ট বা এমনকি কাস্টম গ্রাফিক্স অন্তর্ভুক্ত করার জন্য অফুরন্ত সম্ভাবনার খোলে। উদাহরনঃ background-image: url(image/image.jpg);
ব্যাকগ্রাউন্ড-রিপিট: ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করার সময়, তারা কীভাবে পুনরাবৃত্তি করে বা পুনরাবৃত্তি করে না তা নিয়ন্ত্রণ করা অত্যন্ত গুরুত্বপূর্ণ। ব্যাকগ্রাউন্ড-রিপিট প্রপার্টি আপনাকে ইমেজটি অনুভূমিকভাবে, উল্লম্বভাবে, উভয় ক্ষেত্রেই পুনরাবৃত্তি করা উচিত কিনা তা নির্দিষ্ট করতে দেয়। এটি আপনাকে চিত্রের টাইলিং আচরণের উপর নিয়ন্ত্রণ দেয়। উদাহরনঃ
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
ব্যাকগ্রাউন্ড-অ্যাটাচমেন্ট: এই প্রপার্টিটি নির্ধারণ করে যে ব্যাকগ্রাউন্ড ইমেজটি বিষয়বস্তুর সাথে স্ক্রল করে নাকি ব্যবহারকারীর স্ক্রোল করার সময় স্থির থাকে। একটি স্থির ব্যাকগ্রাউন্ড মনোমুগ্ধকর প্রভাব তৈরি করতে পারে, যেমন প্যারালাক্স স্ক্রলিং, যা আপনার ওয়েব পৃষ্ঠায় গভীরতা এবং ইন্টারঅ্যাক্টিভিটি যোগ করে।
background-attachment: fixed;
background-attachment: scroll;
CSS পটভূমি বৈশিষ্ট্য (CSS background properties) [বাংলায় CSS মাস্টার ক্লাস] সম্পর্কে বিস্তারিত নিচে দেওয়া হল।
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS MASTER JHUTANDA</title>
<!--https://jhutanda.com-->
<!--https://github.com/jhutanda-->
</head>
<body>
<!-- background color -->
<style>
body {
background-color: aqua;
}
/* background image */
body {
background-image: url(image/image.jpg);
}
/* background repeat */
body {
background-image: url(iamges/image.png);
/* choose one at a time */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
}
/* background-attachment */
body {
background-image: url(image.png);
/*choose one at a time */
background-attachment: fixed;
background-attachment: scroll;
}
/* Background Shorthand "all property will background related" */
body {
/* 1st example */
background-image: url(image.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
/* Background Shorthand method */
background: url(image.jpg) no-repeat fixed;
/* two method is same */
}
</style>
</body>
</html>