Tag Archives: ব্যাকগ্রাউন্ড

সি এস এস টিউটোরিয়াল (css tutorial)

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

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Sheikh Mahfuzur Rahman

 

সিএসএস-থ্রি'তে কিছু নতুন ব্যাকগ্রাউন্ড প্রপার্টি যোগ করা হয়েছে, যার মাধ্যমে ব্যাকগ্রাউন্ড এলিমেন্টকে আরও ভালোভাবে নিয়ন্ত্রণ ও স্টাইল করা যায়।

এই চ্যাপ্টারে আপনারা নিচের ব্যাকগ্রাউন্ড প্রপার্টিগুলো সম্পর্কে জানবেনঃ

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

কিভাবে মাল্টিপল (একাধিক) ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা যায় তা নিয়েও এখানে আলোচনা করা হবে।

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

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

Property Internet Explorer Google Chrome Mozila Firefox Safari Opera
background-image
(একাধিক ব্যাকগ্রাউন্ড সহ)

9.0

4.0

3.6

3.1

11.5
background-size

9.0

4.0
1.0 -webkit-

4.0
3.6 -moz-

4.1
3.0 -webkit-

10.5
10.0 -o-
background-origin

9.0

1.0

4.0

3.0

10.5
background-clip

9.0

4.0

4.0

3.0

10.5

 

সিএসএস-থ্রি background-size প্রপার্টি

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

আপনি সাইজটি পিক্সেল বা পার্সেন্টেজে নির্ধারণ করে দিতে পারেন। আপনি যদি সাইজটি পার্সেন্টেজে ঠিক করে দেন, সাইজটি প্যারেন্ট এলিমেন্টের প্রস্থ ও উচ্চতা এর সাপেক্ষে নির্ধারিত হবে।

১) উদাহরণ

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

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
    border: 1px solid black;
    background:url(img_flwr.gif);
    background-repeat: no-repeat;
    padding:15px;
}

#example2 {
    border: 1px solid black;
    background:url(img_flwr.gif);
    background-size: 100px 80px;
    background-repeat: no-repeat;
    padding:15px;
}
</style>
</head>


<body>

<p>Original background-image:</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>Resized background-image:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

 

২) উদাহরণ
পুরো কন্টেন্ট এরিয়াতে ব্যাকগ্রাউন্ড ইমেজকে ছরিয়ে দেয়াঃ

div {
background: url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}

 

 

সিএসএস-থ্রি ব্যাকগ্রাউন্ড-অরিজিন প্রপার্টি

background-origin প্রপার্টি ব্যাকগ্রাউন্ড ইমেজের অবস্থান (positioning) নির্ধারণ করে দেয়। ব্যকগ্রাউন্ড ইমেজটি content-box, padding-box অথবা border-box এরিয়াতে বসানো যায়।

উদাহরণ
ব্যাকগ্রাউন্ড ইমেজকে content-box এ স্থাপন করাঃ

div {
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
}

 

 

সিএসএস-থ্রি মাল্টিপল ব্যাকগ্রাউন্ড ইমেজ

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

উদাহরণ
এলিমেন্টের জন্য দু'টি ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা যাকঃ

body {
background: url(img_tree.gif), url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}

 

 

সিএসএস-থ্রি ব্যাকগ্রাউন্ড প্রপার্টিসমূহ

  • background-clip - এটি ব্যাকগ্রাউন্ড ইমেজের পেইন্টিং এরিয়া নির্ধারণ করে।
  • background-origin - এটি ব্যকগ্রাউন্ড ইমেজের পজিশনিং (অবস্থান) এরিয়া নির্ধারণ করে
  • background-size - এটি ব্যাকগ্রাউন্ড ইমেজের সাইজ ঠিক করে।
সি এস এস টিউটোরিয়াল (css tutorial)

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

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

CSS background properties ব্যাবহার করা হয় element এর background effects নির্দেশ করার জন্য।

যে CSS properties গুলি background effects এর জন্য ব্যাবহার করা হয় তা নিম্নরুপঃ

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

 

Background Color

একটি element এর background color নির্দিষ্ট করার জন্য background-color property ব্যাবহার করা হয়।
একটি page এর background color নির্ধারণ করার উপায় নিম্নরুপঃ

body {
    background-color: #b0c4de;
}

 

CSS দ্বারা একটি color প্রায়শ এভাবে নির্ধারিত করা হয়ে থাকেঃ

  • a HEX value - like "#ff0000"
  • an RGB value - like "rgb(255,0,0)"
  • a color name - like "red"

 

নিম্নোক্ত উদাহরণে <h1>, <p>, এবং <div> এলিমেন্ট এর ভিন্ন ভিন্ন ব্যাকগ্রাউন্ড কালার রয়েছে

h1 {
    background-color: #6495ed;
}

p {
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
}

 

Background Image

একটি element এর background হিসেবে image ব্যাবহার করতে চাইলে background-image property ব্যাবহার করতে হয়।
স্বাভাবিক ভাবে image টির পুনরাবৃত্তি ঘটে এবং এটি element অংশ কে আবৃত করে।
একটি page এর background image নিম্নরূপে নির্ধারণ করা হয়ঃ

body {
    background-image: url("paper.gif");
}
নিম্নের উদাহরণ টি text and background image এর অসম জোড় যেখানে text টি প্রায় পড়ার অযোগ্যঃ
body {
    background-image: url("bgdesert.jpg");
}

 

Background Image - Horizontally বা Vertically পুনরাবৃত্তি

স্বাভাবিক ভাবে background-image property একটি image কে horizontally (আনুভূমিক) এবং vertically (উল্লম্ব) ভাবে পুনরাবৃত্তি করে ।
কিছু কিছু image এর ক্ষেত্রে শুধু horizontal অথবা vertical পুনরাবৃত্তির প্রয়োজন হয়, তা নাহলে তাদেরকে অদ্ভুত দেখায়।

body {
    background-image: url("gradient_bg.png");
}

 

যদি image টি শুধুমাত্র horizontally পুনরাবৃত্তি হত তবে background অনেক চমৎকার দেখাত।

body {
     background-image: url("gradient_bg.png");
     background-repeat: repeat-x;
 }

 

Background Image - অবস্থান নির্ধারণ এবং কোন পুনরাবৃত্তি নয়

বিঃ দ্রঃ যখন background image ব্যাবহার করা হয় তখন এমন image ব্যাবহার করা ভাল যা text এর উপর কোন প্রভাব ফেলে না ।

Image কে পুনরাবৃত্তি না করে একবার নির্দিষ্ট করা হয় background-repeat property দ্বারা।

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

 

উপরে বর্ণীত উদাহরণ গুলিতে background image এবং text কে একই জাইগা তে দেখানো হয়েছে । এখন আমরা image এর  জাইগা পরিবর্তন করব যেন image এর জন্য text এর উপর তেমন কোন প্রভাব না পরে।

এখানে background-position property দ্বারা image এর জাইগা ঠিক করা হয়।

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

 

Background - শর্টহ্যান্ড প্রোপার্টি

উপরের উদাহরন গুলি থেকে আপনারা দেখতে পাচ্ছেন যে background কে মনোরম করার জন্য অনেকগুলি properties ব্যাবহার করা হয়েছে।

code কে ছোট করতে সকল properties কে একটি একক properties এ রূপ দেয়া হয়। একে property সংক্ষিপ্ত হয়।

Background এর জন্য shorthand property হচ্ছে "background"।

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

 

যখন shorthand property ব্যাবহার করা হয় তখন value গুলির ক্রম হচ্ছেঃ

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

 

যদি কোন property value না থাকে তবে কোন সমস্যা নেই কিন্তু যদি উপস্থিত থাকে তবে উপরোক্ত ক্রম মেনে চলবে।

এই উদাহরণ টি ব্যাবহার করা হয় advanced CSS এর জন্য।

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin-left: 200px;
    background: #5d9ab2 url("img_tree.png") no-repeat top left;
}

.container {
    text-align: center;
}

.center_div {
    border: 1px solid gray;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    background-color: #d0f0f6;
    text-align: left;
    padding: 8px;
}
</style>
</head>
<body>

<div class="container">
  <div class="center_div">
    <h1>Hello World!</h1>
    <p>This example contains some advanced CSS methods you may not have learned yet. 
    But, we will explain these methods in a later chapter in the tutorial.</p>
  </div>
</div>

</body>
</html>

 

নিজে নিজে চেষ্টা করো

অনুশীলন ০১ঃ

পেজ এর ব্যাকগ্রাউন্ড রঙ হিসেবে "linen" এবং <h1> এর ব্যাকগ্রাউন্ড রঙ হিসেবে "lightblue" নির্ধারণ করোঃ

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

অনুশীলন ০২ঃ

"paper.gif" নামক ছবিটি পেজ এর ব্যাকগ্রাউন্ড ছবি হিসেবে নির্ধারণ করো

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

অনুশীলন ০৩ঃ

"gradient_bg_vertical.png" নামক ছবিটি ব্যাকগ্রাউন্ড হিসেবে নির্ধারণ করো এবং এটিকে শুধুমাত্র উল্লম্বভাবে পুনরাবৃত্তি ঘটাওঃ

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

অনুশীলন ০৪ঃ
ব্যাকড্রাউন্ড ছবি কেবলমাত্র একবার উপরের দিকে ডান পাশে প্রদর্শন করো

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: url("img_tree.png");
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

অনুলীন ০৫ঃ

ব্যাকগ্রাইন্ড প্রোপার্টি ব্যবহার করে উপরের দিকে ডান পাশে কেবলমাত্র একবার "img_tree.png" নামক ছবিটি প্রদর্শন করোঃ

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

 

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

প্রোপার্টি বর্ণনা
background এক ঘোষণায় সকল ব্যাকগ্রাউন্ড বৈশিষ্ট্য নির্ধারণ করে
background-attachment একটি ব্যাকগ্রাউন্ড ইমেজ নির্দিষ্ট থাকবে বা পেজ এর সাথে স্ক্রল হবে তা নির্ধারণ করে
background-color একটি এলিমেন্ট এর ব্যাকগ্রাউন্ড রং নির্ধারণ করে
background-image একটি এলিমেন্ট জন্য ব্যাকগ্রাউন্ড ইমেজ নির্ধারণ করে
background-position একটি ব্যাকগ্রাউন্ড ইমেজ এর শুরুর অবস্থানে নির্ধারণ করে
background-repeat একটি ব্যাকগ্রাউন্ড ইমেজ কিভাবে পুনরাবৃত্তি হবে তা নির্ধারণ করে