تنظیم رنگ, تصویر وموقعیت تصویر زمینه با css

کار با رنگ و تصویر زمینه در طراحی صفحات با CSS

Background

ما با استفاده از شناسه BACKGROUND در تگ BODY می توانستیم برای صفحه تصویر زمینه مشخص کنیم. اما با استفاده از استایل می توانیم کنترل بیشتری بر این تصویر زمینه داشته باشیم چه این تصویر زمینه برای کل صفحه استفاده شود چه برای قسمت مشخصی از صفحه. برای مثال می توانیم تصویر زمینه را به گونه ای تعریف کنیم که تکرار نشود، ثابت باشد، یا برای آن نقطه شروع تعیین کنیم. برخی از این خواص را می توانید در جدول زیر ملاحظه کنید:

توضیحات	مقادیر قابل استفاده	ویژگی
مشخص کننده رنگ زمینه	color-rgb, color-hex, color-name,transparent	background-color:#مقدار رنگ
مشخص کننده محل قرار گرفتن تصویر در اینترنت است	آدرس محل قرار گرفتن تصویر	background-image: url(url)
نوع تکرار تصویر را مشخص می کند	repeat, no-repeat, repeat-x, repeat-y	background-repeat: مقدار ویژگی
مشخص می کند که آیا تصویر زمینه با اسکرول کردن صفحه حرکت می کند یا در جای خود ثابت می ماند	scroll, fixed	background-attachment: مقدار ویژگی
موقعیت تصویر زمینه در صفحه را مشخص می کند	مقدار اول: top, center, bottom, عددی در مقیاس پیکسل، عددی در مقیاس درصد مقدار دوم: left, center, right, عددی در مقیاس پیکسل، عددی در مقیاس درصد	background-position: مقدار دوم مقدار اول

برای استفاده از این ویژگیها و کاربرد آنها برای تگ BODY می توانید یک استایل در قسمت HEAD متن تعریف کنید یا از استایل خارجی استفاده کنید. مثلاً برای تصویر زمینه صفحات سایت ما می توان در قسمت HEAD متن یک استایل به صورت زیر تعریف کرد:

<style type="text/css">
<!--
body {
background-image:url(example.jpg);
background-repeat:repeat-y }
-->
</style>

در این صورت تصویر زمینه ای مشابه سایت ما خواهید داشت. می توانید آنرا امتحان کنید.

---

background-color

این ویژگی به ما اجازه می دهد تا تقریباً برای هر چیزی در صفحه رنگ زمینه مشخص کنیم. برای این کار باید این ویژگی را به همراه رنگ مورد نظر وارد تگ مربوط به قسمت مورد نظر کنیم. اگر بخواهیم زمینه قسمتی از یک متن را مشخص کنیم می توانیم از این ویژگی در یک تگ SPAN در اطراف متن مورد نظر استفاده کنیم.

در مثال زیر زمینه قسمتی از یک متن را به رنگ زرد در می آوریم:

<p>متن بدون زمینه. <span style="background-color: yellow">این قسمت زمینه زرد دارد.</span></p>

این هم متن نهایی:

متن بدون زمینه. این قسمت زمینه زرد دارد.

همینطور می توانیم از این ویژگی برای تغییر زمینه یک جدول یا DIV هم استفاده کنیم:

<table border="1" style="background-color: #FFC0CB">
<td>سلول اول</td>
<td>سلول دوم</td>
</table>

این هم جدول به دست آمده:

سلول اول

سلول دوم

شما حتی می توانید از این ویژگی برای سلولهای یک جدول به صورت جداگانه استفاده کنید.

یک نمونه دیگر از موارد استفاده این ویژگی در طراحی فرمهاست. به مثال زیر توجه کنید:

<form action="some_script>
نام : <input type="text" size="30" style="background-color: #ddeeff">
</form>

این هم فرم آزمایشی ما:

نام :

توجه داشته باشید که در این ویژگی هم می توانیم از نام رنگ ها و هم از معادل هگزادسیمال آنها استفاده کنیم.

شما می توانید با استفاده از این ویژگی در تگ body رنگ زمینه صفحه را هم تغییر دهید. در مورد تصویر زمینه هم که در قسمت بعد به آن می پردازیم می توان به همین صورت عمل کرد.

---

background-image

این ویژگی برای مشخص کردن تصویر زمینه به کار می رود.کاربرد background-image همانند background-color است با این تفاوت که به جای مشخص کردن رنگ باید یک تصویر را تعیین کنیم. این ویژگی به صورت زیر نوشته می شود.

background-image:url(آدرس تصویر مورد نظر)

بعد از نام ویژگی باید از url برای مشخص کردن آدرس تصویر استفاده کنیم. آدرس تصویری که می خواهیم به عنوان زمینه استفاده کنیم نیازی نیست بین علامتهای نقل قول ( " ) قرار گیرد ولی باید بین دو پرانتز قرار گیرد.
به یک مثال در این رابطه توجه کنید:

قبل از شروع به تمرین ابتدا شما می بایست تصویری را در نظر بگیرید برای مثال تصویری که ما برای این مثال ها در نظر گرفته ایم چنین تصویری می باشد :

<div style="background-image: url(example.gif)">برای این div از تصویر زمینه استفاده شده است.</div>

می توانید نتیجه کد بالا را مشاهده کنید:

برای این div از تصویر زمینه استفاده شده است.

از این ویژگی می توان تقریباً برای همه اجزای صفحه استفاده کرد. در اینجا برای یک جدول از آن استفاده کرده ایم:

<table border="1" style="background-image: url(example.gif)">
<td>محتویات سلول اول</td>
<td>محتویات سلول دوم</td>
</table>

جدول به دست آمده مانند زیر است:

محتویات سلول اول

محتویات سلول دوم

همانطور که برای text box از رنگ زمینه استفاده کردیم برای آن از تصویر زمینه هم می توانیم استفاده کنیم. در اینجا از این ویژگی برای یک textarea استفاده می کنیم:

<form>
<textarea rows="8" cols="60" style="background-image:url(example.gif)">
</textarea>
</form>

نتیجه را ملاحظه کنید:

---

background-repeat

همانطور که در درس قبل ملاحظه کردید در مورد background-image توضیحاتی داده شد. در اینجا به سایر ویژگیهای مربوط به تصویر زمینه می پردازیم.

این ویژگی تعیین کننده نوع تکرار شدن تصویر زمینه است. در اینجا مقادیری را که می توان به این ویژگی اختصاص داد بیان می کنیم:

• repeat
  این مقدار تعیین می کند که تصویر زمینه در صورتی که از اندازه پنجره کوچکتر بود هم به صورت افقی و هم عمودی تکرار شود تا همه زمینه پنجره را بپوشاند.
• no-repeat
  این گزینه مشخص می کند که تصویر زمینه نباید تکرار شود حتی اگر از اندازه پنجره کوچکتر بود.
• repeat-x
  این گزینه مشخص می کند که تصویر باید به صورت افقی تکرار شود نه عمودی.
• repeat-y
  این گزینه مشخص می کند که تصویر زمینه باید به صورت عمودی تکرار شود.

---

background-attachment

از این ویژگی برای تعیین موقعیت تصویر زمینه در هنگام بالا و پایین بردن صفحه به وسیله اسکرول بار در پنجره مرورگر است. مقادیر زیر را می توان برای این ویژگی استفاده کرد:

• scroll
  اگر این گزینه را انتخاب کنید تصویر زمینه به همراه محتویات صفحه به بالا و پایین می رود.
• fixed
  با انتخاب این گزینه مشخص می کنید که تصویر زمینه در هنگام حرکت کردن محتویات صفحه باید ثابت بماند و حرکت نکند.
  کد زیر را می توان برای مشخص کردن تصویر زمینه ثابت در بخش HEAD متن استفاده کرد.

<style type="text/css">
<!--
body {
background-image:url(example.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center center }
-->
</style>

این مثال را به یاد داشته باشید. دوباره از آن استفاده خواهیم کرد. در درس بعدی به سایر ویژگیهای مرتبط با تصویر زمینه می پردازیم.

---

background-position

این ویژگی جهت تعیین موقعیت تصویر زمینه در صفحه استفاده می شود. این ویژگی بیشتر زمانی مورد استفاده قرار می گردد که برای تصویر زمینه از background-repeat: no-repeat استفاده شده باشد. این ویژگی می تواند دو مقدار را همزمان به خود اختصاص دهد. با این دو مقدار می توانیم موقعیت عمودی و افقی تصویر در صفحه را تعیین کنیم. توجه داشته باشید که این دو مقدار باید با یک فاصله خالی از هم جدا شوند نه کاما یا نقطه ویرگول.

دو مقداری که می توان به این ویژگی اختصاص داد از مقادیر زیر انتخاب می شوند:

• top, center, or bottom
• left, center, or right

برای این ویژگی باید از هر دسته از مقادیر بالا فقط یکی انتخاب شود. در اینجا می توانید برخی از موارد قابل استفاده را مشاهده کنید:

• background-position:top right
  این ویژگی تصویر زمینه را در بالا و سمت راست صفحه نمایش می دهد.
• background-position:center right
  این ویژگی تصویر را در سمت راست وسط صفحه نمایش می دهد.
• background-position:bottom center
  این ویژگی تصویر زمینه را در پایین مرکز صفحه نمایش می دهد.

می توانیم به جای گزینه های بالا از مقادیری در مقیاس پیکسل یا درصد قرار دهیم تا تصویر زمینه را در هر فاصله ای از بالا و سمت چپ صفحه که بخواهیم قرار دهیم. در این روش فقط کافیست مقدار فاصله از سمت چپ صفحه را نوشته و مقیاس آن را مشخص کنیم و با یک فاصله مقدار فاصله از بالای صفحه همراه با مقیاس آنرا بنویسیم. به مثال زیر توجه کنید:

کد زیر را به منظور تعیین تصویر زمینه صفحه در بخش HEAD صفحه قرار می دهیم:

<style type="text/css">
<!--
body {
background-image:url(examlpe.jpg);
background-attachment:fixed;
background-position:40px 20px }
-->
</style>

با ترکیب کردن ویژگیهایی که توضیح داده شد می توانیم انواع تصویر زمینه مختلف و جالبی را به وجود بیاوریم. می توانید این کار را انجام دهید و تنوع آنرا ملاحظه کنید.

یک مثال ساده در مورد backgrond-position
تذکر
همیشه به یا د داشته باشید که مراحل background از مقدار رنگ شروع می شود. مثال :

background:#fff url(xxx.jpg) no-repeat scroll top right

حال فرض کنیم که فضایی داریم به اندازه 300 در 300 که می خواهیم تصویر مورد نظر ما که کوچکتراز این فضا می باشد در قسمت پایین سمت راست قرار دهیم به این کد توجه فرمایید:

border:#ff0000 1px solid;
width:300px;
height:300px;
background:#fff url(kebrit.gif) no-repeat scroll bottom right