Creative IT Blog Just another WordPress site
Related Articles
CSS Background:
CSS background একটি গুরত্বপূর্ন বিষয়। ওয়েবপেজের বিভিন্ন উপাদান যেমন Body, Paragraph, Table ইত্যাদির জন্য ব্যাগ্রাউন্ড একটি অপরিহার্য উপাদান।এ সকল উপাদান সমূহের ব্যাকগ্রাউন্ড হিসেবে কালার অথবা ইমেজ ব্যবহার করা্ যায়।
HTML এলিমেন্টের background পরিবর্তনের জন্য CSS এ বেশ কয়েকটি প্রোপার্টিজ আছে। নিচে আলোচনা করা হল।
background color:
background-color নামে একটা প্রোপার্টিজ আছে এটার মান যেকোন রং দিতে পারেন। হেক্সাডেসিমাল (যেমন #fff000, #555, #000000 ইত্যাদি), RGB (যেমন rgb(192,192,192), rgb(255,255,0) ইত্যাদি) কিংবা রংয়ের নাম (যেমন maroon, black, red ইত্যাদি) যেকোনটি দিলেই কাজ হবে। কোন মান না দিলে বাই ডিফল্ট “transparent” নেয়।
background images:
background-image নামে একটা প্রোপার্টিজ আছে এটা দিয়ে এলিমেন্টের পেছনে যেকোন ছবি দেয়া যায়। এর মান দিতে হয় এভাবে-
background-image : url(path/to/image);
url এর ভিতর ছবির উৎস দেখিয়ে দিতে হবে।
background repeat:
background-repeat প্রোপার্টি দিয়ে ব্যাকগ্রাউন্ডে থাকা ছবি (যদি background-image থাকে) কিভাবে বা কোনদিকে পূনরাবৃত্তি (repeat) হবে সেটা ঠিক করে দেয়া যায়। যেমন
background-repeat: repeat;
“repeat” দিলে X এবং Y উভয় অক্ষ বরাবর ছবিটির পূনরাবৃত্তি হবে, বাই ডিফল্ট এটাই থাকে। এছাড়া এর আরও ৩ টি মান দেয়া যায়:
“no-repeat” দিলে কোন পূনরাবৃত্তি হবেনা।
“repeat-x” দিলে শুধু X অক্ষ বরাবর রিপিট হবে
“repeat-y” দিলে Y অক্ষ বরাবর রিপিট হবে।
background position:
background-position প্রোপার্টি দিয়ে ব্যাকগ্রাউন্ড ছবির অবস্থান ইচ্ছে মত অবস্থানে আনা যায়। বাই ডিফল্ট এর মান থাকে 0% 0%
এর সম্ভাব্য মান হতে পারে
background-position:left top;
background-position:left center;
background-position:left bottom;
background-position:center top;
background-position:center center;
background-position:center bottom;
background-position:right top;
background-position:right center;
background-position:right bottom;
background-position:10% 10%;
background-position:50px 50px;
background-position:inherit;
left center, left top ইত্যাদি মানগুলি দেয়ার সময় যদি যেকোন একটা দেন তবে বাকিটি center নিয়ে নেবে।
% এর মান পিক্সেল দিয়ে দেয়া যাবে। আর inherit দিলে প্যারেন্ট এলিমেন্টের টি পাবে।
background-attachment নামে আরেকটা প্রোপার্টি আছে এটার মান হতে পারে “scroll” (এটা বাই ডিফল্ট থাকে) আর “fixed”। scroll থাকলে মাউস স্ক্রলিং এর সাথে সাথে ব্যাকগ্রাউন্ডও স্ক্রল করবে (যদি কনটেন্ট, ব্রাউজার উইন্ডোর চেয়ে লম্বা হয়) এবং fixed দিলে মাউস স্ক্রলিং এর সাথে সাথে ব্যাকগ্রাউন্ড সরবেনা।
সবগুলি দিয়ে একটা উদাহরন-
# demo {
background-color: #5d8e50;
background-image:url(/images/pic.jpg);
background-repeat: no-repeat;
background-position: center right;
}
সবগুলি প্রোপার্টিজের একসাথে ব্যবহার-
background প্রোপার্টি দিয়ে উপরের সবগুলি একসাথে ব্যবহার করা যায়। মানগুলি একটা একটা করে স্পেস দিয়ে দিতে হয়।
যেমন ১ নম্বরে দিতে হয় background-color এর মান এরপর background-image এরপর background-repeat এরপর background-position সবশেষে background-attachment.
#demo{
background: #5d8e50 url(/images/pic.jpg) no-repeat center right scroll;
}
প্রতিটি মানের মাধে অবশ্যই একটা স্পেস দিতে হবে ।
এই খানে internal css দিয়ে project দেখান হল । External css এর জন্য css টুকু style.css নিয়ে গেলেই হবে আর .html file a link করে দিতে হবে-
<!DOCTYPE html >
<html>
<head>
<title> background </title>
<style>
body{
background: url(../images/bg.png);
background-attachment:fixed;
}
# demo {
background: #ccc ;
color: #fff;
margin-left:50px;
}
h1{
margin-top:50px;
color:#C00;
}
</style>
</head>
<body >
<h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </h1>
<p id=”demo “>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br />
</p>
</body>
</html>
