সিএসএস(৩) 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>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 প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।
এই প্রোপার্টির ৩টি ভ্যালু রয়েছে। যথাঃ
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 প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।
এই প্রোপার্টির ৩টি ভ্যালু রয়েছে। যথাঃ
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>
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
