সিএসএস ব্যাকগ্রাউন্ড টিউটোরিয়াল (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
সিএসএস 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.
সিএসএস 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: ![]() 1.p { 2.background-image:
url(http://www.webforbd.blogspot.com/ 3.images/stories/back_image.jpg); 4.background-repeat:
repeat-x; 5.} প্রদর্শন: এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু ল কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা |
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন