সিএসএস ব্যাকগ্রাউন্ড - Css Background



কোন এলিমেন্টের ব্যাকগ্রাউন্ড এ বিভিন্ন রকম স্টাইল বা effect তৈরি করতে সিএসএস ব্যাকগ্রাউন্ড প্রপার্টি ব্যবহার করা হয়। অর্থাৎ ব্যাকগ্রাউন্ডের রং, ছবি সংযোজন ও ছবির অবস্থান নির্ধারণ ইত্যাদি নির্ধারণ করা হয় সিএসএস ব্যাকগ্রাউন্ড প্রপার্টির মাধ্যমে।


ব্যাকগ্রাউন্ড effect

সিএসএস এ ব্যাকগ্রাউন্ড স্টাইলের জন্য যে সকল প্রপার্টির রয়েছে সেগুলো নিম্নরূপ -

ব্যাকগ্রাউন্ড-কালার (background-color)
ব্যাকগ্রাউন্ড-ইমেজ (background-image)
ব্যাকগ্রাউন্ড-রিপিট (background-repeat)
ব্যাকগ্রাউন্ড-এটাচমেন্ট (background-attachment)
ব্যাকগ্রাউন্ড-পজিসন (background-position)


ব্যাকগ্রাউন্ড কালার

কোন এলিমেন্টের ব্যাকগ্রাউন্ডের রং বা color নির্ধারণ করতে সিএসএস ব্যাকগ্রাউন্ড কালার (background-color) প্রপার্টি ব্যবহার করা হয়।

কোন এইচটিএমএল ডকুমেন্টের body তে ব্যাকগ্রাউন্ড কালার নির্ধারণ করার নিয়ম নীচে দেয়া হল -

উদাহরণ দেখুন

body{background-color:silver}


বিভিন্ন পদ্ধতিতে কালার উল্লেখ করা যায়। তার মাঝে উল্লেখযোগ্য পদ্ধতিগুলো হল -
১) রঙের নাম ব্যবহার করে, যেমন- red
২) RGB মান ব্যবহার করে, যেমন- rgb(00,00,55)
৩) হেক্সাডেসিম্যাল পদ্ধতি ব্যবহার করে, যেমন- #000055

সিএসএস এ ব্যবহার করার জন্য বিভিন্ন রঙের মান বা কোড জানতে এইচটিএমএল কালার কোড পেজটি ভিজিট করুন।


ব্যাকগ্রাউন্ড ইমেজ

কোন এলিমেন্টের ব্যাকগ্রাউন্ডের ছবি বা image নির্ধারণ করতে সিএসএস ব্যাকগ্রাউন্ড ইমেজ (background-image) প্রপার্টি ব্যবহার করা হয়।

সিএসএস এ ব্যাবহৃত জনপ্রিয় image format গুলো হল -
jpg
png
gif

default ভাবে এই ইমেজটি সমগ্র ব্যাকগ্রাউন্ড জুড়ে থাকে, রিপিট প্রপার্টি ব্যবহার করে একে নিয়ন্ত্রণ করা যায়।

কোন ওয়েব পেজের জন্য ব্যাকগ্রাউন্ড ইমেজ নির্ধারণ করার নিয়ম হল -

উদাহরণ দেখুন

body{background-image:url('image_name.format');}




রিপিট - horizontaly অথবা verticaly

ব্যাকগ্রাউন্ড ইমেজ প্রপার্টি ব্যবহার করে কোন ইমেজ ব্যাকগ্রাউন্ডে ব্যবহার করলে, default ভাবে ইমেজটি সমগ্র ব্যাকগ্রাউন্ড জুড়ে অবস্থান করে।

কিন্তু কখনও কখনও শুধুমাত্র আনুভুমিক (horizontal) বা উলম্ব (vertical) ভাবে ব্যাকগ্রাউন্ডে ইমেজ প্রদর্শনের প্রয়োজন হতে পারে। background-repeat প্রপার্টি ব্যবহার করে এটা করা যায়। ব্যাকগ্রাউন্ড ইমেজ শুধুমাত্র আনুভুমিক বা horizontaly প্রদর্শন করার নিয়ম নীচে দেখুন -

উদাহরণ দেখুন

body{
background-image:url('background.jpg');
background-repeat:repeat-x;
}


ব্যাকগ্রাউন্ড ইমেজ শুধুমাত্র উলম্ব বা vertical প্রদর্শন করার নিয়ম নীচে দেখুন -

উদাহরণ দেখুন

body{
background-image:url('background.jpg');
background-repeat:repeat-y;
}




ব্যাকগ্রাউন্ড পজিসন

কখনও কখনও ইমেজকে একবার মাত্র প্রদর্শনের প্রয়োজন হতে পারে। যদি ব্যাকগ্রাউন্ড ইমেজ শুধুমাত্র একবার প্রদর্শন করার প্রয়োজন হয় তবে নীচের মত কোড লিখুন -

উদাহরণ দেখুন

body{
background-image:url('background.jpg');
background-repeat:no-repeat;
}


যদি ব্যাকগ্রাউন্ডের কোন নির্দিষ্ট অংশে ইমেজ প্রদর্শন করার প্রয়োজন হয় তবে background-position প্রপার্টি ব্যবহার করে তা করা যায়। ব্যাকগ্রাউন্ড ইমেজটি কে ব্যাকগ্রাউন্ডের কোন নির্দিষ্ট অংশে প্রদর্শন করার নিয়ম নীচে দেখুন -

উদাহরণ দেখুন

body{
background-image:url('background.jpg');
background-repeat:no-repeat;
background-position:right top;
}


এর ফলে ইমেজটি ব্যাকগ্রাউন্ডের ডান দিকের ওপরের অংশে প্রদর্শিত হবে।


শর্টহ্যান্ড প্রপার্টি

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

ব্যাকগ্রাউন্ডের সকল প্রপার্টিগুলোর শর্টহ্যান্ড প্রপার্টি হল background

নীচে ব্যাকগ্রাউন্ড শর্টহ্যান্ড প্রপার্টি লেখার নিয়ম দেয়া হল -

উদাহরণ দেখুন

body {
background:#ffffff url('flower.png') no-repeat fixed right top;
}


শর্টহ্যান্ড প্রপার্টি ব্যবহার করার জন্য একটি নির্দিষ্ট সারি বা ক্রম অনুসরন করতে হবে। তা হল শর্টহ্যান্ড প্রপার্টিতে প্রথমে color তারপর background-image তারপর repeat তারপর attachment এবং সর্বশেষে position উল্লেখ করতে হবে। তবে এই ক্রম থেকে কোন প্রপার্টি বাদ গেলেও শর্টহ্যান্ড প্রপার্টি সঠিক ভাবে কাজ করবে।


সব ব্যাকগ্রাউন্ড প্রপার্টি

প্রপার্টি বর্ণনা
background একটি মাত্র প্রপার্টির মাধ্যমে সকল background প্রপার্টি নির্ধারণ করা।
background-attachment পেজের অবস্থান পরিবর্তনের সাথে background image টি fixed থাকবে না scroll করবে তা নির্ধারণ করে।
background-color কোন এলিমেন্টের background এর রং নির্ধারণ করে।
background-image কোন এলিমেন্টের জন্য background image নির্ধারণ করে।
background-position background image এর position নির্ধারণ করে।
background-repeat একটি background image এর পুনরাবৃতি নির্ধারণ করে।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.