সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

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


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

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

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

  • 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