قالب وردپرس پوسته وردپرس قالب فروشگاهی وردپس
خانه / آموزش css / ساخت پس زمینه های مختلف

ساخت پس زمینه های مختلف

در دو جلسه قبل با مواردی در CSS و طراحی وب آشنایی پیدا کردیم.در این مقاله قصد داریم به بررسی نحوه ایجاد پس زمینه با CSS بپردازیم.گفته شد که در CSS ، ما می توانیم ظاهر صفحه وب را تغییر دهیم.خواص و ویزگی های ظاهری از جمله پس زمینه را می توان با CSS تعیین کرد.

ایجاد پس زمینه در CSS و background در CSS

آموزش CSS مقدماتی را ادامه می دهیم.در CSS برای ایجاد و یا تغییر background  از دستور background  استفاده می کنیم.توجه فرمایید که برای تعیین background  می توان روش های متعددی از جمله رنگ آمیزی پس زمینه ، تصویر در پس زمینه و … استفاده نمود.در مثال زیر را با نحوه تعیین رنگ برای پس زمینه آشنا می شویم:

body {
    background-color: #000;
}

و اما سوال این است در CSS رنگ ها چگونه تعیین می شوند؟ آشنایی با رنگ ها لازمه آموزش CSS است. می دانیم در CSS ، رنگ ها در سیستم هگز (HEX) تعیین می شوند.در CSS هر رنگمعادل است با یک رشته ۶ حرفی، به عنوان مثال در CSS ، عبارت #۰۰۰۰۰۰ به معنای رنگ مشکی است یا اینکه می توان رنگ سفید را با #ffffff در CSS تعیین نمود.بنابراین با استفاده از دستور background-color می توان رنگ پس زمینه را در CSS تعیین نمود.همچنین CSS رنگ های لاتین را نیز می شناسد،بدین معنا که می تاونیم از عبارت green برای رنگ سبز در CSS استفاده کنیم.یا از عبارت red برای تعیین رنگ بندی قرمز در CSS استفاده کرد.اما برای درج تصویر در پس زمینه در CSS ، از دستور background-image می توان استفاده نمود.

body {
    background-image: url("back.gif");
}

در مثال بالا، تصویری به نام back.gif را پس زمینه کل بدنه صفحه وب قرار دادیم.این یکی  دیگر از دستورات CSS است که برای درج تصویر در پس زمینه می توان از آن استفاده کرد.اگر تصویر پس زمینه در یکی از پوشه های سایت باشد،لازم است در CSS ،مسیر آن تصویر را به صورت کامل بنویسیم.مثلا اگر در پوشه ای به نام images باشد،باید قبل از نام تصویر،عبارت images را نیز بگذاریم.برای اینکه تصویر در راستای محور افقی یا عمودی تکرار شود یا نشود،می توان از دستور background-repeat در CSS استفاده نمود.مثال:

background-repeat: no-repeat;

در کد بالا این دستور نشان داده شده است.اگر قصد دارید پس زمینه تکرار نشود ،از مقدار no-repeat استفاده نمایید و اگر قصد دارید در راستای محور افقی در CSS پس زمینه تکرار شود یا خیر از دستور background-repeat-x و در راستای محور عمودی در CSS از دستور background-repeat-y استفاده نمایید. در سیستم های مدیریت محتوا چون سیستم جوملا (آموزش جوملا ) و … نیز از همین سیستم استفاده می شود.

 

سايت بزرگ کليک سايت،بهترين مرجع در ضمينه آموزش طراحي سايت و آموزش html و آموزش css ميباشد.تمامي فيلم هاي آموزشي اين سايت توسط استادان کاردان و بسيار با تجربه تهيه شده که تضميني بر کيفيت بالاي تمامي آن ها است.قيمت محصولات نيز کاملا رقابتي بوده و با مقايسه آن با ساير سايت ها ميتوان به خوبي متوجه اين موضوع شد.

درباره ی admin

مطلب پیشنهادی

نکات مهم css

در ادامه مقالات آموزش CSS : شاید تا کنون دو مفهوم inline-block و float را …

پاسخ دهید

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

قالب وردپرس پوسته وردپرس قالب فروشگاهی وردپس