X

X

X

CSS3 Backgrounds । ব্যাকগ্রাউন্ড


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

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

একই ইলামেন্টে কিভাবে একাধিক ব্যাকগ্রাউন্ড ইমেজ বা কালার সেট করা যায় তা এই চ্যাপ্টারে জানতে পারবেন।

একই সাথে নিম্নোক্ত CSS3 property সমূহ সম্পর্কেও আলোচনা করা হবে:

  • background-size
  • background-origin
  • background-clip

Browser Support

নিচে উল্লিখিত ব্রাউজারসমূহ উল্লিখিত ভার্শন থেকে এই প্রপার্টিগুলো সাপোর্ট করে। -webkit-, -moz-, ও -o- প্রিফিক্সসমূহ যথাক্রমে গুগলক্রোম, মজিলা ফায়ারফক্স ও অপেরা ব্রাউজারের ক্ষেত্রে প্রযোজ্য।

প্রপার্টি
background-image
(একাধিক background সহ)
4.0 9.0 3.6 3.1 11.5
background-size 4.0
1.0 -webkit-
9.0 4.0
3.6 -moz-
4.1
3.0 -webkit-
10.5
10.0 -o-
background-origin 1.0 9.0 4.0 3.0 10.5
background-clip 4.0 9.0 4.0 3.0 10.5

CSS3 একাধিক ব্যাকগ্রাউন্ড

CSS3 তে background-image property ব্যবহার করে একই ইলামেন্টে একাধিক ব্যাকগ্রাউন্ড ইমেজ সেট করা যায়।

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

নিচের উদাহরণে দুটি ব্যাকগ্রাউন্ড ইমেজ সেট করা হয়েছে। প্রথমটি একটি ফুলের ছবি ( bottom ও right কর্ণারে অবস্থিত) এবং দ্বিতয়িটি একটি পেপার ব্যাকগ্রাউন্ড (top-left corner এ অবস্থিত)।

Code Example

#example1 {
    background-image: url(https://www.w3schools.com/css/img_flwr.gif), url(https://www.w3schools.com/css/paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}

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

পৃথকভাবে একধিক ব্যাকগ্রাউন্ড প্রপার্টি ব্যবহার করে একাধিক ব্যাকগ্রাউন্ড সেট করা যায়, অথবা codespan”>background shorthand property ব্যবহার করে একসাথে সবগুলো ব্যাকগ্রাউন্ড সেট করা যায়।

নিচের উদাহরণে background shorthand property ব্যবহার করা হয়েছে, যেটির আউটপুট আগেরটির মত হবে:

Code Example

#example1 {
    background: url(https://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(https://www.w3schools.com/css/paper.gif) left top repeat;
    padding: 15px;
}

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


CSS3 Background Size

CSS3 background-size property ব্যবহার করে background image সমূহের সাইজ সেট করা হয়।

CSS3 আসার আগে ব্যাকগ্রাউন্ড ইমেজের ডিফল্ট সাইজ হিসেবে ইমেজটির প্রকৃত সাইজ ব্যবহৃত হতো। কিন্তু এখন আপনি ইচ্ছেমত যেকোনো সাইজ ব্যবহার করতে পারবেন, এবং একই ইমেজকে একাধিকবার ব্যবহার করতে পারবেন।

length, percentage, অথবা : contain বা cover কিওয়ার্ডকেও প্রপার্টির মান হিসেবে ব্যবহার করতে পারবেন।

নিচের উদাহরণে পিক্সেল ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজের সাইজ নির্ধারণ করা হয়েছে।
মূল ব্যাকগ্রাউন্ড ছবি:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Resized background image:

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

নিচের ব্যবহৃত কোডটি উল্লেখ্য করা হলো:

Code Example

#example1 {
    border: 1px solid black;
    background:url(https://www.w3schools.com/css/img_flwr.gif);
    background-size: 100px 80px;
    background-repeat: no-repeat;
    padding:15px;
}

#example2 {
    border: 1px solid black;
    background:url(https://www.w3schools.com/css/img_flwr.gif);
    background-repeat: no-repeat;
    padding:15px;
}

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

code class=”w3-codespan”>background-size এর আরও দুটি ব্যাকগ্রাউন্ড মান হলো < are contain এবং cover

contain keyword ব্যবহার করলে ব্যাকগ্রাউন্ড ইমেজটি পুরো ইলামেন্টেে দৃশ্যমান নাও হতে পারে। তবে পুরো ইমেজটি দৃশ্যমান হবে।

The cover keyword ব্যবহার করলে ব্যাকগ্রাউন্ড ইজেটি পুরো ইলামেন্টে দৃশ্যমান হবে, এবং প্রয়োজনের এর কিছু অংশ কর্তিত হতে পারে।

নিচের উদাহরণে containcover এর ব্যবহার দেখানো হলো:

Code Example

.div1 {
    border: 1px solid black;
    height:120px;
    width:150px;
    background:url(https://www.w3schools.com/css/img_flwr.gif);
    background-repeat: no-repeat;
    background-size: contain;
}

.div2 {
    border: 1px solid black;
    height:120px;
    width:150px;
    background:url(https://www.w3schools.com/css/img_flwr.gif);
    background-repeat: no-repeat;
    background-size: cover;
}

.div3 {
    border: 1px solid black;
    height:120px;
    width:150px;
    background:url(https://www.w3schools.com/css/img_flwr.gif);
    background-repeat: no-repeat;
}

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


একাধিক Background Image এর সাইজ বর্ণনা

background-size property ব্যবহার করে একাধিক ব্যাকগ্রাউন্ড ইমেজের সাইজ পৃথক পৃথকভাবে বর্ণনা করা যায়।

নিচের উদাহরণে একাধিক ব্যাকগ্রাউন্ড ইমেজ সেট করা হয়েছে এবং এদের জন্য সাইজ বর্ণনা করা হয়েছে:

Code Example

#example1 {
    background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    padding: 15px;
    background-size: 50px, 130px, auto;
}

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


Full Size Background Image

পুরো ব্রাউজার উইন্ডোর জন্য ব্যাকগ্রাউন্ড ইমেজ সেট করতে চাইলে নিচের পদ্ধতি অনুসরণ করতে হবে:

এক্ষেত্রে আমাদের কাংখিত রিকোয়ারমেন্ট হচ্ছে:

  • পুরো উইন্ডো কাভার করতে হবে।
  • প্রয়োজন অনুযায়ী ইমেজটিকে সম্প্রসারণ বা সংকোচন করতে হবে।
  • পেজের কেন্দ্রে ইমেজটিকে উপস্থাপণ করতে হবে।
  • এক্ষেত্রে স্ক্রলবার যাতে কোনো ইফেক্ট না ফেলে সেদিকে লক্ষ্য রাখতে হবে।

নিচের উদাহরণের দেখানো হলো এটি কিভাবে করা যায়। প্রথমে যেকোনো HTML ইলামেন্টকে কন্টেইনার হিসেবে বিবেচনা করতে হবে। এর উচ্চাতা বা প্রস্থা যাতে পুরো ব্রাউজার কাভার করবে। তারপর এর কেন্দ্র বরাবরা ব্যাকগ্রাউন্ড ইমেজ সেট করতে হবে। এরপর background-size property ব্যবহার করে এর সাইজ নির্ধারণ করতে হবে:

Code Example

html { 
  background: url(https://www.w3schools.com/css/img_flower.jpg) no-repeat center fixed; 
  background-size: cover;
}

body { 
  color: white; 
}

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


CSS3 background-origin Property

CSS3 background-origin দিয়ে ব্যাকগ্রাউন্ড ইমেজের অবস্থান নির্ধারণ করা হয়।

এই প্রাপার্টির তিন ধরণের মানের প্রয়োজন:

  • border-box – background image টি বর্ডারের upper left corner থেকে শুরু হয়।
  • padding-box – (default) background image টি প্যাডিং এর upper left corner থেকে শুরু হয়।
  • content-box – background image টি কন্ডেন্ট বক্সের upper left corner থেকে শুরু হয়।

নিচের উদাহরণে background-origin property এর বর্ণনা দেওয়া হলো:

Code Example

#example1 {
    border: 10px solid black;
    padding: 35px;
    background: url(https://www.w3schools.com/css/img_flwr.gif);
    background-repeat: no-repeat;
}

#example2 {
    border: 10px solid black;
    padding: 35px;
    background: url(https://www.w3schools.com/css/img_flwr.gif);
    background-repeat: no-repeat;
    background-origin: border-box;
}

#example3 {
    border: 10px solid black;
    padding: 35px;
    background: url(https://www.w3schools.com/css/img_flwr.gif);
    background-repeat: no-repeat;
    background-origin: content-box;
}

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


CSS3 background-clip Property

CSS3 background-clip property দ্বারা কোনো ইলামেন্টের ব্যাকগ্রাউন্ডের painting area-এর বর্ণনা দেওয়া হয়।

এই প্রপার্টিরও তিন ধরণের মান রয়েছে:

  • border-box – (default) background টি বর্ডারের বাইরের প্রান্ত থেকে পেইন্ট হয়।
  • padding-box – background টি প্যাডিংয়ের বাইরের প্রান্ত থেকে পেইন্ট হয়।
  • content-box – background টি কন্টেন্ট বক্সের বাইরের প্রান্ত থেকে পেইন্ট হয়।

নিচের উদাহরণে background-clip property এর বর্ণনা দেওয়া হলো:

Code Example

#example1 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
}

#example2 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: padding-box;
}

#example3 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: content-box;
}

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


নিজে নিজে চর্চা করুন!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »


CSS3 Background Property সমূহ

Property বর্ণনা
background এক লাইনের কোডের মাধ্যমে সব ব্যাকগ্রাউন্ড প্রপার্টির জন্য মান সেট করার শর্টহ্যান্ড পদ্ধতি।
background-clip ব্যাকগ্রাউন্ডের পেইন্টিং এরিয়ার বর্ণনা দেওয়া হয়।
background-image কোনো ইলামেন্টের জন্য এক বা একাধিক ব্যাকগ্রাউন্ড ইমেজ সেট করা হয়।
background-origin ব্যাকগ্রাউন্ড ইমেজের অবস্থান নির্ধারণ করা হয়।
background-size ব্যাকগ্রাউন্ড ইমেজের সাইজ নির্ধারণ করা হয়।