صفحه اصلی وب سايت واقعآ محشر جستجو در سایت

طراحي حرفه اي وب سايت : طراحي وب سايت خود را به گروه فناوري اطلاعات ايران بسپاريد

طراحي وب سايت طراحي حرفه اي وب سايت بهينه سازي وب سايت

تغییر رنگ و تصویر زمینه عناصر HTML با CSS

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: #009900">
</form>

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

نام :

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

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

 

background-image

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

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

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

<span style="background-image: url(http://www.neopersia.org/css/example1.gif)">برای این span از تصویر زمینه استفاده شده است.</span>

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

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

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

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

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

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

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

<form>
<textarea rows="8" cols="60" style="background-image:url(http://www.neopersia.org/css/example1.gif)">
</textarea>
</form>

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


نظرات بازدید کنندگان
Fri, 17 Apr 2009 20:44:53 +0430 نویسنده : حسن فراهانی
با سلام.
من میخوام رنگ کلی زمینه وبلاگم رو عوض کنم اما نمی تونم اگه کمکم کنید ممنون میشم.
 
Sun, 06 Jul 2008 01:06:58 +0430 نویسنده : Omid Nasiri
با سلام.
من اطلاعات زیادی در مورد web ندارم ولی مجبورم از جایی شروع کنم .من باید از کجا شروع کنم .با سپاس فراوان از شما دوست گرام .
 
Sun, 02 Mar 2008 11:14:07 +0330 نویسنده : یاسر زینلی (مدیر سایت)
ضمن تشکر از محمد جواد عزیز و تأیید حرف ایشون در مورد اینکه سایت طراحی شده باید Cross Browser باشه یا به فارسی بگیم با همه مرورگر ها سازگار باشه
استفاده از جدول در این صفحه فقط برای نمونه بود برای اینکه روشن کنیم از این ویژگی CSS میشه در بسیاری از عناصر HTML استفاده کرد
جدولها هنوز هم قسمتی از استاندارد HTML و XHTML هستند و باید برای نمایش برخی از محتویات سایت از اونا استفاده بشه البته در جای خودش
این که میگن نباید از جدول استفاده بشه منظور برای شکل دهی به صفحه هست چون اصولاً عناصر HTML هر کدوم معنی خودشونو دارند و برای تغییر ظاهر صفحه به وجود نیومدند
در مورد بک اسلش ها شما درست میگید قسمتی از توابع امنیتی سایت هستند که فراموش کردم به هنگام نمیش صفحه اونا رو درست کنم سعی میکنم سریع حلش کنم و به همراه ادیتور جدید سایت رو به روز کنم
 
Sat, 01 Mar 2008 19:16:34 +0330 نویسنده : محمد جواد
این کد زیری به خاطر چیزهای امنیتی شما با ید \\ ها را را بعد از \" ها بردارید.
 
Sat, 01 Mar 2008 19:13:24 +0330 نویسنده : محمد جواد
این نمونه زیر در سه مرورگر Firefox و Internet Explorer و opera ساپورت می کنه.

یک نکته به دوستان عزیر و گرامی اینه که یادتون باشه اگه خواستید طراح وب بشید اولین کاری که می کنید سایتی را که می سازید سعی کنید با همه مرورگر ها باز بشه و مشکل نداشته باشه , الان سایت دانشگاه پیام نور و ... این مشکل را دارن.
اگه سوالی داشتید به با ایمیل بزنید . [email protected]

این نمونه را امتحان کنید.

<div style=\"margin: auto; width: 200px;\">
    <div style=\"border: 1px solid; width: 98px; float: left;\">نمونه</div>
    <div style=\"border: 1px solid; width: 98px; float: left;\">نمونه</div>
</div>
 
Sat, 01 Mar 2008 18:39:41 +0330 نویسنده : محمد جواد
سلام شما در اینجا نباید به دوستان آموزش table را بدید شما می توانستید با همان div به جای table استفاده کنید دیگه الان همه سایت ها که دارن می سازن با div به جای table استفاده می کنند . لازم به ذکر است که div خیلی خیلی سبک تر از table است.
 
ساعت: 00:14 - تاریخ: 12 بهمن 1386 نویسنده : hamid
من اينكارو ميكنم ولي تصوير مورد نظر پس زمينه قرار نميگيره.
يه مشكل ديگه هم كه من دارم اينه كه صفحاتي كه طراحي منكنم با مرورگرهاي غير از اينترنت اكسپلورر دو تا مشكل اساسي داره : 1- تصاوير در مرورگرهاي ديگه نشان داده نميشن. 2- استايلهاي خارجي كه به صفحه لينك ميكنم در مرورگرهاي ديگه اعمال نميشن.
اگه منو راهنمايي كنيد ممنون ميشم.