সিএসএস(৩) ব্যাকগ্রাউন্ড

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

এই অধ্যায়ে আপনি একাধিক ইমেজ ব্যবহার করে একটি ব্যাকগ্রাউন্ড ইমেজ যুক্ত করা শিখবেন।

এছাড়া আপনি সিএসএস(৩) তে সংযোজিত অন্যান্য ব্যাকগ্রাউন্ড প্রোপার্টিগুলো সম্পর্কেও জানতে পারবেন। যথাঃ

background-clip
background-origin
background-size

এক নজরে ব্যাকগ্রাউন্ড প্রোপার্টিসমূহ

background

ব্যাকগ্রাউন্ডের সবগুলো প্রোপার্টি একত্রে সেট করার জন্য একটি সংক্ষিপ্ত প্রোপার্টি।

background-clip

ব্যাকগ্রাউন্ডের অংকিত এরিয়া নির্ধারণ করে।

background-image

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

background-origin

ব্যাকগ্রাউন্ড ইমেজ বা ইমেজগুলোর অবস্থান নির্ধারণ করে।

background-size

ব্যাকগ্রাউন্ড ইমেজ বা ইমেজগুলোর সাইজ/আকার নির্ধারণ করে।

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

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

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

নিম্নের উদাহরণটি দেখলে ব্যাকগ্রাউন্ডে ইমেজ সেট করার ধারনা আপনার কাছে আরও স্পষ্ট হয়ে উঠবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
#exercise1 {
    background-image: url(../css_examples/natural.jpg), url(../css_examples/beauty.jpg);
    background-position: top, bottom;
    background-repeat: no-repeat, no-repeat;
    color: yellow;
    padding:10px;
}
</style>
   <title>সিএসএস ব্যাকগ্রাউন্ড ইমেজ এর উদাহরণ</title>
</head>
<body>

<div id="exercise1">
<h1>সিএসএস(৩) ব্যাকগ্রাউন্ড</h1>
<p>ব্যাকগ্রাউন্ড সেট করার জন্য সিএসএস(৩) তে কিছু নতুন প্রোপার্টি যোগ হয়েছে। 
এই নতুন প্রোপার্টিসমুহ ব্যবহার করে আপনি একটি এলিমেন্টের ব্যাকগ্রাউন্ডকে আরও 
ভালোভাবে নিয়ন্ত্রণ করতে পারবেন।</p><
p>সিএসএস(৩) background-image প্রোপার্টির মাধ্যমে আপনি একটি এলিমেন্টে একাধিক 
ব্যাকগ্রাউন্ড ইমেজ যুক্ত করতে পারবেন।</p>
</div>

</body>
</html>

ফলাফল

উপরের উদাহরণে একাধিক ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করার জন্য ব্যাকগ্রাউন্ড প্রোপার্টিগুলো আলদা আলদা ভাবে ব্যবহার করা হয়েছে। নিম্নের উদাহরণেও আমরা উপরের উদাহরণের মত একই কাজ করবো। কিন্তু এক্ষেত্রে আমরা ব্যাকগ্রাউন্ডের সংক্ষিপ্ত প্রোপার্টি background ব্যবহার করবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
#exercise{
    background:  url(../css_examples/natural1.jpg) top no-repeat, 
    url(../css_examples/beauty.jpg) bottom no-repeat;
    color: yellow;
    padding : 10px;
}
</style>
   <title>সিএসএস ব্যাকগ্রাউন্ড ইমেজ এর উদাহরণ</title>
</head>
<body>

<div id="exercise1">

<p> একাধিক ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করার জন্য আপনি ব্যাকগ্রাউন্ড প্রোপার্টিগুলো আলদা আলদা ভাবে 
অথবা ব্যাকগ্রাউন্ডের সংক্ষিপ্ত প্রোপার্টি  background ও ব্যবহার করতে পারেন।</p>
</div>

</body>
</html>

ফলাফল

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

সিএসএস(৩) background-size প্রোপার্টির মাধ্যমে আপনি একটি ব্যাকগ্রাউন্ড ইমেজের সাইজ বা আকার নিয়ন্ত্রন করতে পারবেন। সিএসএস(৩) আসার পূর্বে ব্যকগ্রাউন্ড ইমেজের আকার নিয়ন্ত্রন করা যেত না। মূল ইমেজের আকারই হতো ব্যকগ্রাউন্ড ইমেজের আকার।

সুতরাং আপনি সিএসএস(৩) ব্যবহার করে একটি ইমেজকে পুনঃব্যবহার করে এর সাইজ দৈর্ঘ্য এবং শতকরায় নির্ধারণ করতে পারবেন। এছাড়া contain অথবা cover এই দুইটি কি-ওয়ার্ড ব্যবহার করেও আপনি ব্যাকগ্রাউন্ড ইমেজ এর আকার পরিবর্তন করতে পারবেন।

নিম্নের উদাহরণে background-size প্রোপার্টি ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজ এর সাইজ পরিবর্তন করে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
#exercise1 {
   	background: url(../css_examples/natural.jpg);
    background-repeat: no-repeat;
    padding:20px;
    color:yellow;
}

#exercise2 {
    background: url(../css_examples/natural.jpg);
    background-size: 300px 200px;
    background-repeat: no-repeat;
    padding:20px;
    color:yellow;
}
</style>
   <title>সিএসএসের উদাহরণ</title>
</head>
<body>

<p>মূ্ল background-image:</p>
<div id="exercise1">
<p>সিএসএস(৩) background-size প্রোপার্টির মাধ্যমে আপনি একটি ব্যাকগ্রাউন্ড ইমেজের 
সাইজ বা আকার নিয়ন্ত্রন করতে পারবেন। 
সিএসএস(৩) আসার পূর্বে ব্যকগ্রাউন্ড ইমেজের আকার নিয়ন্ত্রন করা যেত না।  
মূল ইমেজের আকারই হতো ব্যকগ্রাউন্ড ইমেজের আকার।</p>
</div>

<p> পরিবর্তিত background-image:</p>
<div id="exercise2">
<p>
সুতরাং আপনি সিএসএস(৩) ব্যবহার করে  একটি ইমেজকে পুনঃব্যবহার করে
এর সাইজ  দৈর্ঘ্য এবং  শতকরায় নির্ধারণ করতে পারেন। 
এছাড়া contain অথবা cover এই দুইটি কি-ওয়ার্ড ব্যবহার
করেও আপনি ব্যাকগ্রাউন্ড ইমেজ এর আকার পরিবর্তন করতে পারেন।</p>
</div>

</body>
</html>

ফলাফল

contain এবং cover কীওয়ার্ড

background-size এর আরো দুইটি ভ্যালু হলো contain এবং cover।

contain কীওয়ার্ড ব্যাকগ্রাউন্ড ইমেজকে যতদুর সম্ভব বৃদ্ধি করে। তবে এই ইমেজের প্রস্থ এবং উচ্চতা অবশ্যই কন্টেন্ট এরিয়ার সাথে খাপ খেতে হবে।

cover কীওয়ার্ড ব্যাকগ্রাউন্ড ইমেজকে উভয় দিকে বৃদ্ধি করে যাতে কন্টেন্ট এরিয়া ব্যাকগ্রাউন্ড ইমেজ দ্বারা আচ্ছাদিত হয়।

নিম্নের উদাহরণে contain এবং cover এর ব্যবহার দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.image1 {
    border:3px solid blue;
    height:200px;
    width:350px;
    background:url(../css_examples/natural.jpg);
    background-repeat:no-repeat;
}

.image2 {
    border:3px solid blue;
    height:200px;  
    width:350px;
    background:url(../css_examples/natural.jpg);
    background-repeat:no-repeat;
    background-size:contain;
}

.image3 {
    border: 3px solid blue;
    height:200px;
    width:350px;
    background: url(../css_examples/natural.jpg);
    background-repeat:no-repeat;
    background-size:cover;
}
</style>
   <title>সিএসএসের উদাহরণ</title>
</head>
<body>

<p> মূল ছবি:</p>
<div class="image1">
<p>  আমার বাংলাদেশ!!</p>
</div>

<p>"contain" keyword এর ব্যবহারঃ</p>
<div class="image2">
<p> ডিজিটাল বাংলাদেশ!!</p>
</div>

<p>"cover" keyword এর ব্যবহারঃ</p>
<div class="image3">
<p> আমার স্যাট!!</p>
</div>

</body>
</html>

ফলাফল

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

সিএসএস(৩) এর মাধ্যমে একাধিক ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা যায়। background-size প্রোপার্টিতে একাধিক ভ্যালু ব্যবহার করে আপনি এই ব্যাকগ্রাউন্ড ইমেজগুলোর সাইজ নির্ধারণ করতে পারবেন। এক্ষেত্রে কমা চিহ্ন দ্বারা ভ্যালুসমূহকে পৃথক করতে হবে।

নিম্নের উদাহরণে ৩টি ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা হয়েছে এবং প্রত্যেকটি ইমেজের জন্য background-size এর পৃথক মান দেওয়া হয়েছেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
#exercise1 {
    background: url(../css/css_examples/natural.jpg) left top no-repeat,  
    url(../css/css_examples/natural.jpg) right bottom no-repeat, url(../css/css_examples/beauty.jpg) left top repeat;
    padding:20px;
    background-size: 60px, 150px, auto;
}
</style>
   <title>সিএসএসের উদাহরণ</title>
</head>
<body>

<div id="exercise1">
<p>ব্যাকগ্রাউন্ড সেট করার জন্য সিএসএস(৩) তে কিছু নতুন প্রোপার্টি যোগ হয়েছে। 
এই নতুন প্রোপার্টিসমুহ ব্যবহার করে আপনি একটি এলিমেন্টের ব্যাকগ্রাউন্ডকে 
আরও ভালোভাবে নিয়ন্ত্রণ করতে পারবেন।
</p>
</div>

</body>
</html>

ফলাফল

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

আমাদের ওয়েবসাইটে এমন একটি ব্যাকগ্রাউন্ড ইমেজ চাই যা ব্রাউজারের সম্পূর্ণ উইন্ডোকে সর্বদাই আচ্ছাদিত করে রাখবে।

এটি করার জন্য শর্তগুলো নিম্নরুপঃ

সঠিক সাইজের ইমেজ নিতে হবে।
ইমেজ দিয়ে পুরো পেজকে পূর্ণ করতে হবে।
ইমেজটি পেজের মাঝখানে রাখতে হবে।
এবং কোনো স্ক্রলবার তৈরি করা যাবে না।

নিম্নের উদাহরণে এটি করে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
html{
  background: url(../css_examples/beauty.jpg) no-repeat center fixed;
  background-size: cover;
}

body {
  color: white;
}
</style>
   <title>সম্পূর্ণ সাইজের ব্যাকগ্রাউন্ড ইমেজ</title>
</head>
<body>

<h2> সম্পূর্ণ পেইজে ব্যাকগ্রাউন্ড ছবি</h2>
<p>ব্যাকগ্রাউন্ড সেট করার জন্য সিএসএস(৩) তে কিছু নতুন প্রোপার্টি যোগ হয়েছে। 
এই নতুন প্রোপার্টিসমুহ ব্যবহার করে আপনি একটি এলিমেন্টের ব্যাকগ্রাউন্ডকে 
আরও ভালোভাবে নিয়ন্ত্রণ করতে পারবেন।
</p>

</body>
</html>

ফলাফল

সুতরাং একটি ওয়েব পেজে সম্পূর্ন ব্যাকগ্রাউন্ড ইমেজ দেওয়ার জন্য আপনাকে নিম্নোক্ত কাজ গুলো করতে হবেঃ

<html> ট্যাগে ব্যাকগ্রাউন্ড ইমেজ সেট করতে হবে।
ব্যাকগ্রাউন্ড ইমেজটির পজিশন fixed এবং center রাখতে হবে।
এবং background-size প্রোপার্টির সাইজ সমন্বয় করতে হবে।

সিএসএস(৩) background-origin প্রোপার্টি

ব্যাকগ্রাউন্ড ইমেজটি কোথায় অবস্থান করবে তা সিএসএস(৩) background-origin প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।

এই প্রোপার্টির ৩টি ভ্যালু রয়েছে। যথাঃ

border-box - ব্যাকগ্রাউন্ড ইমেজটি বর্ডারের উপরের বাম কর্ণার থেকে শুরু হয়।
padding-box - ব্যাকগ্রাউন্ড ইমেজটি প্যাডিং এর উপরের বাম কর্ণার থেকে শুরু হয়। এবং এটি ডিফল্ট।
content-box - ব্যাকগ্রাউন্ড ইমেজটি কন্টেন্টের উপরের বাম কর্ণার থেকে শুরু হয়।

নিম্নের উদাহরণে আমরা background-origin প্রোপার্টির ব্যবহার দেখবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
p {
	color:white;
}
#exercise1 {
    border: 10px solid purple;
    padding: 25px;
    background: url(../css_examples/beauty.jpg);
    background-repeat: no-repeat;
}

#exercise2 {
    border: 10px solid purple;
    padding:25px;
    background: url(../css_examples/beauty.jpg);
    background-repeat: no-repeat;
    background-origin: border-box;
}

#exercise3 {
    border: 10px solid purple;
    padding:25px;
    background:url(../css_examples/beauty.jpg);
    background-repeat: no-repeat;
    background-origin: content-box;
}
</style>
   <title>সিএসএসের উদাহরণ</title>
</head>
<body>

<div id="exercise1">
<p>
 background-origin নাই (padding-box   ডিফল্ট):<br>
ব্যাকগ্রাউন্ড সেট করার জন্য সিএসএস(৩) তে কিছু নতুন প্রোপার্টি যোগ হয়েছে। 
এই নতুন প্রোপার্টিসমুহ ব্যবহার করে আপনি একটি এলিমেন্টের ব্যাকগ্রাউন্ডকে 
আরও ভালোভাবে নিয়ন্ত্রণ করতে পারবেন।
</p>
</div><br>

<div id="exercise2">
<p>
background-origin: border-box <br>
ব্যাকগ্রাউন্ড সেট করার জন্য সিএসএস(৩) তে কিছু নতুন প্রোপার্টি যোগ হয়েছে। 
এই নতুন প্রোপার্টিসমুহ ব্যবহার করে আপনি একটি এলিমেন্টের ব্যাকগ্রাউন্ডকে 
আরও ভালোভাবে নিয়ন্ত্রণ করতে পারবেন।
</p>
</div><br>

<div id="exercise2">
<p>
background-origin: content-box <br>
ব্যাকগ্রাউন্ড সেট করার জন্য সিএসএস(৩) তে কিছু নতুন প্রোপার্টি যোগ হয়েছে। 
এই নতুন প্রোপার্টিসমুহ ব্যবহার করে আপনি একটি এলিমেন্টের ব্যাকগ্রাউন্ডকে 
আরও ভালোভাবে নিয়ন্ত্রণ করতে পারবেন।
</p>
</div>

</body>
</html>

ফলাফল

সিএসএস(৩) background-clip প্রোপার্টি

ব্যাকগ্রাউন্ড প্রোপার্টিটি কতটুকু জায়গা জুড়ে অবস্থান করবে তা সিএসএস(৩) background-clip প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।

এই প্রোপার্টির ৩টি ভ্যালু রয়েছে। যথাঃ

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

নিম্নে background-clip প্রোপার্টির উদাহরণ দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
#exercise1 {
    border: 5px dotted blue;
    padding:10px;
    background: lightsalmon;
}

#exercise2 {
    border: 5px dotted blue;
    padding:10px;
    background:lightgreen;
    background-clip: padding-box;
}

#exercise3 {
    border: 5px dotted blue;
    padding:10px;
    background:lightpink;
    background-clip: content-box;
}
</style>
   <title>সিএসএসের উদাহরণ</title>
</head>
<body>

<p>background-clip না থাকায় border-box ডিফল্টভাবে ব্যবহত হয়েছে:</p>
<div id="exercise1">
<p>বর্ডারসহ সম্পূর্ণ কন্টেন্টে ব্যাকগ্রাউন্ড দেখা যাচ্ছে।
</p>
</div>

<p>background-clip: padding-box:</p>
<div id="exercise2">
<p>প্যাডিংসহ সম্পূর্ণ কন্টেন্টে ব্যাকগ্রাউন্ড দেখা যাচ্ছে। এক্ষেত্রে বর্ডার অংশে কোনো ব্যাকগ্রাউন্ড নাই।
</p>
</div>

<p>background-clip: content-box:</p>
<div id="exercise3">
<p>শুধুমাত্র কন্টেন্ট বক্সে ব্যাকগ্রাউন্ড দেখা যাচ্ছে। এক্ষেত্রে বর্ডার এবং প্যাডিং অংশে কোনো ব্যাকগ্রাউন্ড নাই।</p>
</div>

</body>
</html>

ফলাফল

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

প্রোপার্টি	Google Chrome	Edge/IE	Mozila Firefox	Safari	Opera
background-image (একাধিক ব্যাকগ্রাউন্ড সহ)	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

« পূর্ববর্তী

পরবর্তী»

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

সিএসএস টিউটোরিয়াল