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

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

css background-position প্রপার্টি ব্যাকগ্রাউন্ড ইমেজের অবস্থান নির্দিষ্ট করতে ব্যবহৃত হয়।

উদাহরন

ব্যাকগ্রাউন্ড ইমেজটিকে উপরের-ডান কোণায় রাখুন:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; }
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

নিজে চেস্টা করুন

CSS background-position এর ভেলু গুলো হয় center, left top, left bottom, right top, right bottom, % px আকারে ।

ডিফল্ট ভাবে একটি left top এ থাকে এবং px এর ক্ষেত্রে left top থেকে x ও y এক্সিস বরাবর সরতে থাকে ।

উদাহরন

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
background-position: 210px 50px;
background-position: 210px 50px;
background-position: 210px 50px;

নিজে চেষ্টা করুন

CSS Background position
CSS Background position

পরের টিউরোরিয়াল গুলো দেখতে থাকুন । সিএসএস ব্যাকগ্রাউন্ড দিয়ে অনকে সুন্দর ডিজাইন করা যায় যার একটি ভিডিও টিউরোরিয়াল দেবো সিএসএস ব্যাকগ্রাউন্ড টিউটোরিয়াল গুলোর শেষে।

CSS Syntax

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
background-position: value;
background-position: value;
background-position: value;

Property Values

ভেলুবর্ণনা
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
যদি শুধু একটি ভেলু দেয়া হয়, তাহলে অপর টি center হবে
x% y%0% 0% থেকে 100% 100% পর্যন্ত হয় এবং ডানের উপর কোনা থেকে শুরু হয়।
x px y pxএক্ষেত্রে ও  0px 0px থেকে  100px 100px পর্যন্ত হয় এবং ডানের উপর কোনা থেকে শুরু হয়।
initialDefault ভেলু তে নিয়ে যায় । বিস্তারিত দেখুন CSS Initial
inheritপেরেন্ট এলিমেন্ট থেকে ভেলু নেয় ।

কমেন্ট করুন

Your email address will not be published. Required fields are marked *