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

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

লেখক  রাসেল খান

আপনার সাইটের background অনেক বেশি গুরুত্ত্বপুর্ন তাই এই টিউটোরিয়াল টি আপনাদের মনোযোগ সহকারে দেখা উচিত। আপনি যদি professional website তৈরী করতে চান তাহলে  light background এর মধ্যে dark টেক্স ব্যবহার করা উচিত। আর যদি শুধু শখের জন্য তৈরী করতে চান তাহলে যেকোন কালারের সমন্নয় গ্রহনযোগ্য। সিএসএস এর মাধ্যমে আপনি যেকোন সিএসএস এলিমেন্ট এর background color or image  সেট করতে পারেন। তাছাড়া  background image কিভাবে প্রর্দশিত হবে সে বিষয়টি আপনি নিয়ন্ত্রন করতে পারবেন। আপনি পছন্দমত এটিকে horizontally, vertically repeat করতে পারেন।তাছাড়া আপনি  background কে fixed position এ রাখতে পারেন বা scroll করতে পারেন। নিচে সিএসএস background এর ঊদাহরন দেয়া হলো। 1.h4 { background-color: white; } 2.p  { background-color: #1078E1; } 3.ul { background-color: rgb( 149, 206, 145); } প্রদর্শন This is a <h4> with a white background This is a <p> with a background using the hexadecimal value of #1078E1 This is an unordered list with an RGB value of 149, 206, 145 সিএসএস Background Image: gradient background এর মত image কে left-to-right  করা যায়। অথবা যখন ইউজার স্ক্রল করবে তখন আপনি image কে fixed  অবস্থায় রাখতে পারেন । 1.p { background-image: url(smallPic.jpg); } 2.h4{ background-image: url(http:// 3.www.webforbd.blogspot.com/pics/cssT/smallPic.jpg); } This <p> has a background image using a local path to the picture. This <h4> has a background image using the complete url path. 01.p { 02.background-image: url(smallPic.jpg); 03.background-repeat: repeat; } 04.h4 { 05.background-image: url(smallPic.jpg); 06.background-repeat: repeat-y;} 07.ol { 08.background-image: url(smallPic.jpg); 09.background-repeat: repeat-x;} 10.ul { 11.background-image: url(smallPic.jpg); 12.background-repeat: no-repeat;} প্রদর্শন: This <p> has a background image repeating in both directions (default repeat). If you use this option, make sure that your image was designed to be repeated. This <h4> has a background image repeating vertically (y). You could this to add a style to the side of your element. This is an ordered list With a background that repeats Horizontally (x) This is an unordered list With a background that repeats in neither direction. সিএসএস Background Image এর অবস্থান: আপনি যদি নির্দিষ্ট করতে চান যে এইচটিএমএল এলিমেন্ট এর মধ্যে কোথায় image টি প্রদর্শিত হবে তাহলে সেটা CSS's background-position এর মাধ্যমে করা যায়।নিচে তিন (length, percentages, keywords) প্রকারের নির্দিষ্ট করার ঊপায় দেখানো হলো। 1.p { 2.background-image: url(smallPic.jpg); 3.background-position: 20px 10px; 4.} 5.h4 { 6.background-image: url(smallPic.jpg); 7.background-position: 30% 30%; 8.} প্রদর্শন: সিএসএস Gradient Background: যদি gradient background  তৈরী করতে চান তাহলে আপনাকে প্রথমে কাজটি ফটোশপে করতে হবে। Image: ঊপরের image টি খুব সাধারন । আমরা এটাকে horizontal ভাবে রেখেছি । এই image টি 1 pixel এর। repeat attribute এর মাধ্যমে এর value       repeat-x   সেট করেছি  যার ফলে image টি নির্দিষ্ট এর বাম হতে ডান দিকে বিস্তৃতি লাভ করবে। নিচে উদাহরনে paragraph এলিমেন্ট এ gradient background যোগ হয়েছে 1.p { 2.background-image: url(http://www.webforbd.blogspot.com/ 3.images/stories/back_image.jpg); 4.background-repeat: repeat-x; 5.} প্রদর্শন: এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু ল কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা