সিএসএস৩ ব্যাকগ্রাউন্ড - Css3 Backgroud



ব্যাকগ্রাউন্ড আরও আকর্ষণীয় করার জন্য সিএসএস ৩ এ ব্যাকগ্রাউন্ডের কিছু নতুন প্রোপার্টি যোগ করা হয়েছে।


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

ব্যাকগ্রাউন্ড সেট করার জন্য সিএসএস ৩ এ কিছু নতুন প্রোপার্টি যোগ করা হয়েছে। এই নতুন প্রোপার্টিসমুহ ব্যবহার করে কোন একটি এলিমেন্টের ব্যাকগ্রাউন্ডকে আরও আকর্ষণীয় করে তোলা যায়।

এই অধ্যায়ে আপনি দেখবেন কিভাবে একাধিক ইমেজ ব্যবহার করে কোন একটি এলিমেন্টের ব্যাকগ্রাউন্ড ইমেজ করা করা যায়।
এছাড়াও সিএসএস ৩ এ সংযোজিত অন্যান্য ব্যাকগ্রাউন্ড প্রোপার্টিগুলো হল নিম্নরূপ -

background-clip,
background-origin,
background-size


background প্রপার্টি

background প্রোপার্টি ব্যবহারের মাধ্যমে background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment এই সবগুলো প্রোপার্টির কাজ একসাথে করা যায় অর্থাৎ এটি একটি শর্টহ্যান্ড প্রোপার্টি।
নিচে এর সিনট্যাক্স দেখুন -

সিনট্যাক্স

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial/inherit;


নিচে একটি উদাহরণ দেখুন।

উদাহরণ

body{
background: teal url("../example.jpg") no-repeat fixed center;
}


নোট - উপরের কোন একটি ভ্যালু বাদ দেওয়া হলেও এটি কোন প্রভাব ফেলবে না।

যদি অনেক গুলো ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করতে হয় কিন্তু একটি ব্যাকগ্রাউন্ড কালার রাখতে হয় তাহলে background-color প্যারামিটারটি সবার শেষে লিখতে হবে।


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

ব্যাকগ্রাউন্ডে একাধিক ইমেজ ব্যবহার করার সময় কমা(,) চিহ্ন দ্বারা এগুলোকে পৃথক করতে হবে। এক্ষেত্রে ছবিগুলো যেহেতু স্ট্যাক অর্ডারে থাকে, তাই যে ছবিটি সবগুলো ছবির উপরে রাখতে হবে সেটির URL প্রথমে দিতে হবে।

নিচের উদাহরণটি ব্যাপারটা আরও স্পষ্ট করে তুলবে।

উদাহরণ

background: url(../img/exp01.jpg) top no-repeat,
url(../img/exp02.jpg) bottom no-repeat;




background-clip প্রপার্টি

ব্যাকগ্রাউন্ড প্রোপার্টিটি কতটুকু জায়গা জুড়ে অবস্থান করবে তা সিএসএস ৩ এর background-clip প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।
এই প্রোপার্টির ৩টি ভ্যালু রয়েছে। এগুলো হল নিম্নরূপ -
border-box - এই মান ব্যবহার করার ফলে বর্ডারসহ সম্পূর্ণ কন্টেন্টে ব্যাকগ্রাউন্ড থাকবে। এটিই ডিফল্ট রুপে থাকে,
padding-box - এই মান ব্যবহার করার ফলে প্যাডিংসহ সম্পূর্ণ কন্টেন্টে ব্যাকগ্রাউন্ড থাকবে। এক্ষেত্রে বর্ডার অংশে কোনো ব্যাকগ্রাউন্ড থাকবে না এবং
content-box - এই মান ব্যবহার করার ফলে শুধুমাত্র কন্টেন্ট বক্সে ব্যাকগ্রাউন্ড থাকবে। এক্ষেত্রে বর্ডার এবং প্যাডিং অংশে কোনো ব্যাকগ্রাউন্ড থাকবে না।

নিচে সব গুলো মান ব্যবহার করে background-clip প্রোপার্টির উদাহরণ দেখানো হলো -

উদাহরণ

#border-box{
border: 10px dotted red;
padding:20px;
background: yellow;
}
#padding-box{
border: 10px dotted red;
padding:20px;
background:yellow;
background-clip: padding-box;
}
#content-box{
border: 10px dotted red;
padding:20px;
background:yellow;
background-clip: content-box;
}




background-origin প্রপার্টি

ব্যাকগ্রাউন্ড ইমেজটি কোথায় অবস্থান করবে তা সিএসএস ৩ এর background-origin প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।
এই প্রোপার্টির ৩টি ভ্যালু রয়েছে। এগুলো হল -
border-box - ব্যাকগ্রাউন্ড ইমেজটি বর্ডারের উপরের বাম কর্ণার থেকে শুরু হয়,
padding-box - ব্যাকগ্রাউন্ড ইমেজটি প্যাডিং এর উপরের বাম কর্ণার থেকে শুরু হয় এবং এটিই ডিফল্ট রুপে থাকে এবং
content-box - ব্যাকগ্রাউন্ড ইমেজটি কন্টেন্টের উপরের বাম কর্ণার থেকে শুরু হয়।

নিচের একটি উদাহরণ দেখুন, এখানে আমরা background-origin প্রোপার্টির ব্যবহার দেখবো -

উদাহরণ

#border-box{
border: 5px solid teal;
padding: 15px;
background: url(../img/example.png);
background-repeat: no-repeat;
background-origin: border-box;
}
#padding-box{
border: 5px solid teal;
padding: 15px;
background: url(../img/example.png);
background-repeat: no-repeat;
}
#content-box{
border: 5px solid teal;
padding: 15px;
background: url(../img/example.png);
background-repeat: no-repeat;
background-origin: content-box;
}




background-size প্রপার্টি

সিএসএস ৩ এর background-size প্রোপার্টির মাধ্যমে আপনি একটি ব্যাকগ্রাউন্ড ইমেজের সাইজ বা আকার নিয়ন্ত্রন করা যায়। সিএসএস ৩ আসার পূর্বে ব্যকগ্রাউন্ড ইমেজের আকার নিয়ন্ত্রন করা যেত না। মূল ইমেজের আকারই হতো ব্যকগ্রাউন্ড ইমেজের আকার।
কিন্তু সিএসএস ৩ এ একটি ইমেজকে পুনঃব্যবহার করে এর দৈর্ঘ্য বা size শতকরায় নির্ধারণ করা যায়। এছাড়া contain অথবা cover এই দুইটি কি-ওয়ার্ড ব্যবহার করেও ব্যাকগ্রাউন্ড ইমেজ এর আকার পরিবর্তন করা যায়।
নিচের উদাহরণে background-size প্রোপার্টি ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজ এর সাইজ পরিবর্তন করে দেখানো হলো।

উদাহরণ

#exercise{
background: url(../img/excersize.png);
background-size: 300px 200px;
background-repeat: no-repeat;
}


background-size এর আরো দুইটি ভ্যালু হলো contain এবং cover। contain কীওয়ার্ড ব্যাকগ্রাউন্ড ইমেজকে যতদুর সম্ভব বৃদ্ধি করে। তবে এই ইমেজের প্রস্থ এবং উচ্চতা অবশ্যই কন্টেন্ট এরিয়ার সাথে খাপ খেতে হবে। cover কীওয়ার্ড ব্যাকগ্রাউন্ড ইমেজকে উভয় দিকে বৃদ্ধি করে যাতে কন্টেন্ট এরিয়া ব্যাকগ্রাউন্ড ইমেজ দ্বারা আচ্ছাদিত হয়।


একাধিক ব্যাকগ্রাউন্ড ইমেজের আকার নির্ধারণ

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

উদাহরণ

#exercise{
background: url(../img/example01.png) left top no-repeat,
url(../img/example02.png) right bottom no-repeat,
url(../img/example03.png) left top repeat;
background-size: 60px, 150px, auto;
}




সম্পূর্ণ সাইজের ব্যাকগ্রাউন্ড

যদি ওয়েবসাইটে এমন একটি ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করতে হয় যা ব্রাউজারের সম্পূর্ণ উইন্ডোকে সর্বদাই আচ্ছাদিত করে রাখবে তবে নিচের শর্তগুলো পুরন করতে হবে -
সঠিক সাইজের ইমেজ নিতে হবে,
ইমেজ দিয়ে পুরো পেজকে পূর্ণ করতে হবে,
ইমেজটি পেজের মাঝখানে রাখতে হবে এবং
কোনো স্ক্রলবার তৈরি করা যাবে না।

নিচে একটি উদাহরণ দেখুন।

উদাহরণ

html{
background: url(../img/example.png) no-repeat center fixed;
background-size: cover;
}


নোট - একটি ওয়েব পেজে সম্পূর্ন ব্যাকগ্রাউন্ড ইমেজ দেওয়ার জন্য যেকাজ গুলো করতে হবে তা হল - html ট্যাগে ব্যাকগ্রাউন্ড ইমেজ সেট করতে হবে, ব্যাকগ্রাউন্ড ইমেজটির পজিশন fixed এবং center রাখতে হবে এবং background-size প্রোপার্টির সাইজ সমন্বয় করতে হবে।


ব্রাউজার সাপোর্ট

টেবিলে দেয়া রোগুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম ভার্সন নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সাপোর্ট করে। এছাড়াও এর পরের লাইন -webkit- বা -moz- যুক্ত ভার্সন গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম ভার্সন যেগুলো প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।

প্রপার্টি
border-image 16.0
4.0 -webkit-
11.0 15.0
3.5 -moz-
6.0
3.1 -webkit-
15.0
11.0 -o-


সিএসএস ৩ - সকল ব্যাকগ্রাউন্ড প্রপার্টি

প্রপার্টি বর্ণনা
backgroundব্যাকগ্রাউন্ডের সবগুলো প্রোপার্টি একত্রে সেট করার জন্য একটি সংক্ষিপ্ত প্রোপার্টি।
background-clipব্যাকগ্রাউন্ডের অংকিত এরিয়া নির্ধারণ করে।
background-imageব্যাকগ্রাউন্ডের জন্য এক বা একাধিক ইমেজ নির্ধারণ করে।
background-originব্যাকগ্রাউন্ড ইমেজ বা ইমেজগুলোর অবস্থান নির্ধারণ করে।
background-sizeব্যাকগ্রাউন্ড ইমেজ বা ইমেজগুলোর সাইজ/আকার নির্ধারণ করে।







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

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