X

X

X

CSS ব্যাকগ্রাউন্ড (Backgrounds)


কোনো ইলামেন্টের ব্যাকগ্রাউন্ড সেট করার জন্য CSS background property-গুলো ব্যবহার করা হয়।

CSS -এ নিম্নোক্ত background property গুলো ব্যবহৃত হয়:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background-এ রংয়ের ব্যবহার

background-color property দিয়ে কোনো ইলামেন্টের ব্যাকগ্রাউন্ডের রং সেট করা হয়।

নিম্নোক্ত উপায়ে কোনো ইলামেন্টের ব্যাকগ্রাউন্ড কালার সেট করা হয়:

Code Example

body {
    background-color: lightblue;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


সাধারণত CSS, দিয়ে কালার সেট করার জন্য তিনটি পদ্ধতি ব্যবহার করা হয়। এগুলো হলো:

  • color name – যেমন “red”
  • HEX value – যেমন “#ff0000”
  • RGB value – যেমন “rgb(255,0,0)”

বিস্তারিত জানার জন্য CSS Color Values  লিংকটি অনুসরণ করুন।

নিচের উদাহরণে <h1>, <p>, ও <div> ইলামেন্টগুলোর জন্য বিভিন্ন ব্যাকগ্রাউন্ড সেট করা হয়েছে:

Code Example

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Background এ ছবির ব্যবহার

‍ব্যাকগ্রাউন্ডে ছবি ব্যবহারের জন্য background-image property ব্যবহার করতে হবে। ডিফল্ট অবস্থায়, ব্যাকগ্রাউন্ড ছবিটি বারবার উপস্থাপিত হবে, যাতে ইলামেন্টের পুরো এরিয়া কাভার হয়।

কোনো ইলামেন্টের ব্যাকগ্রাউন্ডে ইমেজ নিম্নোক্ত উপায়ে সেট করা যায়:

Code Example

body {
    background-image: url("https://www.w3schools.com/css/paper.gif");
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

ব্যাকগ্রাউন্ডে ছবি ব্যবহারের সময় কিছু বিষয় লক্ষ্য রাখতে হবে। এমন ছবি ব্যবহার করা যাবে না, যাতে ইলামেন্টর কন্টেন্টগুলো সঠিকভাবে বোঝা না যায়। অর্থাৎ, যদি কন্টেন্ট ও ব্যাকগ্রাউন্ড ছবির রং একই হয়ে যায়, তবে কন্টেন্ট ভালোভাবে বোঝা যাবে না। নিচের উদাহরণটি লক্ষ্য করুণ:

Code Example

body {
    background-image: url("https://www.w3schools.com/css/bgdesert.jpg");
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: যদি ব্যাকগ্রাউন্ডে ছবি ব্যবহার করার প্রয়োজন হয়, তবে এমন একটি ছবি ব্যবহার করবেন যাতে এর কন্টেন্টগুলোর উপস্থাপণে কোনো সমস্যা না হয়।


Background ছবিকে- আনুভূমিক বা উল্লম্বভাবে পুনরাবৃত্তিকরণ

সাধারণত , কোনো ইলামেন্টের ব্যাকগ্রাউন্ড ইমেজ একই সাথে লম্বিক এবং আনুভূমিক এই দুই দিকেই পুনারাবর্তিত হয়। তবে এভাবে সব ছবির উপস্থাপণ সব সময় সুবিধাজনক হয় না। কোনো সময় এটি খুব বিরক্তিকর ব্যাপার হয়ে দাঁড়ায়। নিচের উদাহরণটি লক্ষ্য করুন।

Code Example

body {
    background-image: url("https://www.w3schools.com/css/gradient_bg.png");
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

যদি উপরের উদাহরণে ব্যবহৃত ছবিটি শুধুমাত্র আনুভূমিকভাবে পুনারবর্তিত হতো, তবে বেশ ভালো লাগবে। উদাহরণটি লক্ষ্য করুন।

Code Example

body {
    background-image: url("https://www.w3schools.com/css/gradient_bg.png");
    background-repeat: repeat-x;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

টিপস: লম্বিকভাবে কোনো ছবিকে ব্যাকগ্রাউন্ডে ব্যবহার করার জন্য,  background-repeat: repeat-y; ব্যবহার করুন।


ব্যাকগ্রাউন্ড ছবির শুধুমাত্র একবার উপস্থাপণ এবং এর অবস্থান সেট করণ

ব্যাকগ্রাউন্ড ছবিকে শুধুমাত্র একবার উপস্থাপণ করার জন্য background-repeat property ব্যবহার করা হয়:

Code Example

<style>
body {
    background-image: url("https://www.w3schools.com/css/img_tree.png");
    background-repeat: no-repeat;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের উদাহরণে ব্যাকগ্রাউন্ড ছবিকে এবং এর লেখাকে একই অবস্থানে উপস্থাপণ করা হয়েছে। এখন আমরা ছবির অবস্থান পরিবর্তন করবো, যাতে টেক্সট ইলামেন্টটি সঠিকভাবে উপস্থাপিত হয়।

background-position property ব্যবহার করে ব্যাকগ্রাউন্ড ছবিটির অবস্থান সেট করা হয়:

Code Example

<style>
body {
    background-image: url("https://www.w3schools.com/css/img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    margin-right: 200px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Background Image এর নির্দিষ্ট অবস্থান সেট করণ

ব্যাকগ্রাউন্ড ইমেজকে একটি নির্দিষ্ট অবস্থানে উপস্থাপণ করার জন্য  background-attachmentproperty ব্যবহৃত হয়। যদি এর মান fixed সেট করা হয়, তবে পেজ স্ক্রল করলেও এর অবস্থান একই থেকে যায়। এই ফিচারটি ব্যবহার করে প্যারালাক্স ওয়েব পেজ তৈরি করা যায়। প্যারালাক্স ডিজাইন সম্পর্কে বিস্তারিত জানার জন্য নিচের লিংকটি অনুসরণ করুন:
http://myriad.space/ , https://www.w3schools.com/howto/howto_css_parallax.asp/

Code Example

<style>
body {
    background-image: url("https://www.w3schools.com/css/img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    margin-right: 200px;
    background-attachment: fixed;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Background – Shorthand property

একলাইনে সব ব্যাকগ্রাউন্ড প্রোপার্টিগুলো সেট করার জন্য ব্যাকগ্রাউন্ড শর্টহ্যান্ড প্রোপ্রার্টি ব্যবহার করা হয়।

background প্রপার্টি ব্যবহার করে এই কাজটি করা যায়। নিচের উদাহরণটি লক্ষ্য করুণ, তাহলে বিষয়টি ভালোভাবে বুঝতে পারবেন:

Code Example

<style>
body {
    background: #ffffff url("https://www.w3schools.com/css/img_tree.png") no-repeat right top;
    margin-right: 200px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


তবে শর্টহ্যান্ড প্রপার্টি ব্যবহার করার সময়, ক্রমান্বয়ে প্রপার্টিগুলো লিখতে হবে। নিচে প্রপার্টি ক্রমগুলোর তালিকা দেওয়া হলো।

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

যদি এই ক্রমে কোনোটি প্রপার্টি ব্যবহার না করে থাকেন, তবে কোনো সমস্যা হবে না। কিন্তু যেগুলো ব্যবহার করবেন সেগুলোকে ক্রমান্বয়ে লিখতে হবে।


নিচে সব Background Property গুলোর তালিকা উল্লেখ্য করা হলো:

Property বর্ণনা
background এক লাইনে সব ব্যাকগ্রাউন্ড প্রপার্টি ক্রমান্বয়ে সেট করার জন্য ব্যবহৃত হয়।
background-attachment পেজ স্ক্রলিং এর সাপেক্ষে ব্যকগ্রাউন্ড ছবির অবস্থান নির্ধারণ করা হয়।
background-color কোনো ইলামেন্টের ব্যাকগ্রাউন্ড প্রপার্টি সেট করার জন্য ব্যবহৃত হয়।
background-image কোনো ইলামেন্টের ব্যাকগ্রাউন্ডে ছবি সেট করার জন্য ব্যবহৃত হয়।
background-position ব্যাকগ্রাউন্ড ছবি কোন অবস্থান থেকে শুরু হবে তা নির্ধারণ করার জন্য ব্যবহৃত হয়।
background-repeat ব্যাকগ্রাউন্ড ছবি পুনরায় প্রদর্শিত হবে কি হবে না, হলে আনুভূমিক না উল্লম্ব বরাবর প্রদর্শিত হবে তা সেট করার জন্য ব্যবহৃত হয়।