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

0
92
css
css

আপনার সাইটের 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://

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.

  1. This is an ordered list
  2. With a background that repeats
  3. 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  তৈরী করতে চান তাহলে আপনাকে প্রথমে কাজটি ফটোশপে করতে হবে।

সিএসএস Gradient Background:

যদি gradient background  তৈরী করতে চান তাহলে আপনাকে প্রথমে কাজটি ফটোশপে করতে হবে।

Image:

Background Image

ঊপরের image টি খুব সাধারন । আমরা এটাকে horizontal ভাবে রেখেছি । এই image টি 1 pixel এর। repeat attribute এর মাধ্যমে এর value       repeat-x   সেট করেছি  যার ফলে image টি নির্দিষ্ট এর বাম হতে ডান দিকে বিস্তৃতি লাভ করবে। নিচে উদাহরনে paragraph এলিমেন্ট এ gradient background যোগ হয়েছে

1.p {
2.background-image: url(http://www.webcoachbd.com/
3.images/stories/back_image.jpg);
4.background-repeat: repeat-x;
5.}

প্রদর্শন:

(নোট প্যাডে দেখুন)

এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু ল কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখা এখানে কিছু লেখাএখানে কিছু লেখা

LEAVE A REPLY

Please enter your comment!
Please enter your name here