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

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

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

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

body {
    background-color: #000;
}

و اما سوال این است در CSS رنگ ها چگونه تعیین می شوند؟ آشنایی با رنگ ها لازمه آموزش CSS است. می دانیم در CSS ، رنگ ها در سیستم هگز (HEX) تعیین می شوند.در CSS هر رنگمعادل است با یک رشته 6 حرفی، به عنوان مثال در CSS ، عبارت #000000 به معنای رنگ مشکی است یا اینکه می توان رنگ سفید را با #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 استفاده نمایید.

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

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

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

آیا نیاز به مدرک هم دارید؟