یکی از مهمترین امکانات صفحات وب امکان انتخاب صفحه یا رنگ برای پشت زمینه است. موضوعی که به راحتی طراحی صفحه شما را با تغییرات چشمگیری همراه خواهد کرد. در سلسه مراتب آموزش css امروز قصد داریم تا به بررسی پشت زمینه در css بپردازیم. با توکاپس همراه باشید.

پشت زمینه در CSS

یکی از موارد بسیار پر استفاده در CSS استفاده از پشت زمینه‌های متنوع است. در واقع شما در این زبان قادر خواهید بود به هر المانی، عکس یا رنگ یا کادر دلخواه بدهید. قبل از آموزش رنگ‌آمیزی یا قرار دادن عکس در پشت زمینه المان‌های html، نحوه‌ی انتخاب رنگ‌ها را برای المان‌ها مرور می‌کنیم:

چگونگی اضافه کردن رنگ در css

 روش اول -از طریق کد HEX

در این مثال ابتدا علامت # گذاشته و در جلوی آن کد شش رقمی رنگ را می‌نویسیم. برای به دست آوردن کد رنگ می‌توانید از فوتوشاپ یا سرویس‌های آنلاین استفاده کنید.  مثال” ff0000 #”

روش دوم – کد RGB رنگ

در این حالت باید کد RGB‌ رنگ را وارد کنیم. ابتدا کلمه rgb را می‌نویسیم. سپس یک پرانتز باز می‌کنیم و رنگ را به صورت کد آر‌جی‌بی در پرانتز و بین “” می‌نویسیم.”(rgb(255,0,0″

روش سوم – نوشتن نام رنگ‌های پیش‌فرض

ساده‌ترین راه انتخاب رنگ، نوشتن نام رنگ است. البته در این حالت انتخاب شما به رنگ‌های پیش‌فرض معمول محدود می‌شود و نمی توانید از هر رنگی استفاده کنید.  به عنوان مثال : “red” برای رنگ قرمز یا blue برای رنگ آبی.

رنگ پس زمینه:

رنگ پس زمینه که background-color نوشته می شود و برای تغییر رنگ پس زمینه html به کار می رود. در مقابل background-color رنگ ها را به یکی از روش هایی که در بالا ذکر کردیم، می نویسیم. با ادامه آموزش ها همراه باشید تا با جزئیات بیشتری ادامه مطلب را فرا گیریم.

شاید از این مقاله خوشتون بیاد:  آموزش css جلسه پنجم: استایل css منوی کشویی

HTML

<div class=”bg-red”><p>یک متن که داخل یک صفحه قرمز قرار دارد</p></div>

CSS

bg-yellow {

background-color: red;

}

یک متن که داخل یک صفحه رنگ قرمز قرار دارد در گوگل به نمایش در خواهد آمد.

 

عکس پس‌زمینه:

شما در css و html  می‌توانید تصویر پس زمینه یک المان را به راحتی تغییر دهید. عکس پس زمینه در css و html به صورت زیر نمایش داده می شود. این المان با نام background-image نوشته می شود. و بعد از آن باید آدرس عکس مورد نظر را به css معرفی کنیم.


background-image:url(“آدرس”) ;

HTML

<div class=”bg-img”><p>یک متن که داخل یک صفحه با تصویر زمینه قرار دارد</p></div>

CSS

bg-img {

background-image: url(“آدرس”)

}


یک متن که داخل یک صفحه با تصویر زمینه قرار دارد

حتما دقت کنید که آدرس تصویر مورد نظر شما به صورت دقیق و با ذکر پسوند عکس در داخل پرانتز و بین “” نوشته شود. (“url.png”)

تکرار تصویر پس زمینه

شما می‌توانید عکس پس زمینه را به صورت افقی یا عمودی تکرار کنید. از این قابلیت برای نمایش تصاویر با ابعاد کوچکتر استفاده می کنیم.

background-image: url(“آدرس”);

background-repeat: repeat-x;

در اینجا ما بعد از وارد کردن دستور تصویر پس زمینه، گفته‌ایم که تصویر ما در جهت افقی x تکرار شود. این موضوع در حالتی که تصویر شما ابعاد کوچکتری‌ دارد آنقدر تکرار می‌شود تا کل پس زمینه شما را پر کند.

برای تکرار تصویر در جهت عمودی نیز فقط لازم است تا این کد را برای راستای y بنویسیم.

background-image: url(“آدرس”);

background-repeat: repeat-y;

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

شاید از این مقاله خوشتون بیاد:  آموزش css جلسه دوم :ساختار کدهای css

background-repeat:  no repeat;

در این آموزش تنظیم پشت زمینه در css شما یاد گرفتید تا پشت زمینه خود را با استفاده از رنگ ها و تصاویر زیبا کنید. منتظر نظرات و پیشنهادات شما هستیم.


غلامرضا بهشتیان

من غلامرضا بهشتیان، عاشق نوشتن مقاله های مفید در حوزه ی وب هستم. امیدوارم مقالات نوشته شده نظر شما خوانندگان عزیز را جلب نماید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *