آموزشcss – درس پنجم – تصویر زمینه

[ آخرین بازنگری ۲۱ آبان ۱۳۹۵ ] [ نسخه چاپی ]

در درس های گذشته با کلیات css و نحوه استفاده از اون آشنا شدیم.از این درس و دروس آینده با مباحث اصلی و ریزتر css آشنا میشیم و با ذکر مثال های کاربردی مطالب رو بهتر درک خواهیم کرد.
مشخصه background در css برای اختصاص دادن تصویر زمینه برای یک عنصر بکار میرود.مشخصه هایی که در css برای تصویر زمینه مورد استفاده قرار میگیرند عبارتند از:

  • Background-color
  • Background-image
  • Background-repeat
  • Background-attachment
  • Background-position

رنگ زمینه ( background-color ) در CSS

این مشخصه یک رنگ را به زمینه ی یک عنصر و یا بخش و یا حتی کل صفحه اختصاص میدهد.به عنوان مثال اگر بخواهید رنگ زمینه صفحه وب شما قرمز باشد باید رنگ مشخصه background-color را با مقدار red و یا #FF0000 به انتخابگر body نسبت دهید:

Body{background-color:#ff0000;}

در css می توانید به سه طریق رنگ را مشخص کنید:

  • مقدار HEX : نظیر #ff0000
  • مقدار RGB : نظیر rgb(255,0,0)
  • نام رنگ : نظیر red

در مثال زیر نیز رنگ زمینه پاراگراف را برابر نقره ای قرار داده ایم:

P{background-color:#c7c7c7;}

تنظیم رنگ و تصویر زمینه در css

تصویر زمینه ( background-image ) در CSS

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

Body{background-image:url('image.gif');}
در صورتی که تصویر زمینه انتخاب می کنید به خوانا بودن متون صفحه نیز توجه داشته باشید.
همانطور که گفتیم به صورت پیشفرض یک تصویر در دو جهت افقی و عمودی تکرار می شود ولی در مواقعی نیز پیش می آید که تکرار یک تصویر زمینه آزار دهنده است و شما قصد دارید آن را مثلا فقط در یک سطر تکرار کنید،یا اصلا تکرار نکنید!برای این منظور css مقادیر زیر را درنظر گرفته است:

در مثال زیر ما یک تصویر را فقط در جهت افقی تکرار می کنیم:

Background-repeat:repeat-x;

و یا برای تکرار عمودی یک تصویر مانند زیر عمل می کنیم:

Background-repeat:repeat-y;

در صورتی که بخواهید تصویر تکرار نشود :

Background-repeat:no-repeat;

برای درک بهتر در مثال زیر تصویر زمینه ما فقط در جهت عمودی تکرار میشود:

Body{
Background-image:url('image.png');
Background-repeat:repeat-y;
}

در مثال فوق تصویر درست جایی قرار گرفته متن نیز در آنجا نمایش داده میشود.حال ما قصر داریم محل نمایش تصویر را تغییر دهیم.برای اینکار از مشخصه background-position استفاده میکنیم. به مثال زیر توجه نمایید:

Body{
Background-image:url('image.gif');
Background-repeat:no-repeat;
Background-position:right top;
}

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

Body{ background:#ff0000 url('image.gif') no-repeat right top; }

توجه کنید در صورتی که بخواهید فرم کوتاه را بکار گیرید فقط از مشخصه background استفاده نمایید.همچنین مهم نیست که از همه ی مشخصه های ذکر شده در فرم کوتاه استفاده کنید.

احتمالا این مطالب برای شما جالب هستند

طراحی و استایل بندی جدول با کمک CSS
دوره‌ی مقدماتی آموزش کسب مهارت CSS
آشنایی با CSS و لزوم استفاده از آن در طراحی سایت
آموزش css – درس ششم – ویرایش متن
تعیین فونت و قلم نوشته‌ها و استایل بندی آن در CSS
آموزش css – درس چهارم – نحوه استفاده از css
آموزش css – درس دوم-دستورات

گفتگو پیرامون آموزشcss – درس پنجم – تصویر زمینه

(منتشر شده: 2 | در انتظار تایید: 0)
السا

سلام وقتتون بخیر،
من از پیجتون خیلی استفاده کردم خیلی ممنونم از اطلاعات مختصر و مفیدتون، برای من یه سوالی پیش اومده، اگه بخام ویدئویی که تو وبلاگم استفاده میکنم درست وسط کادر باشه چه کدی باید استفاده کنم؟؟؟ برای متن و عکس توضیح دادین و استفاده کردم. لطفا در مورد فیلم هم کمکم کنین.
ممنون از راهنمائیتون.

پاسخ دهید
سجاد پناهی

در پاسخ به السا

سلام
کد زیر را برای کلاس ویدیوی مورد نظر استفاده کنید:
margin: 0 auto;

پاسخ دهید

مرام‌نامه‌ی ارسال دیدگاه را رعایت کرده‌ام! (»نمایش مرام‌نامه)