• صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Menu
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Search
Close this search box.
۰ تومان 0 Cart
  • ورود
  • ثبت نام
Menu
  • ورود
  • ثبت نام
Search
Close this search box.
۰ تومان 0 Cart
Menu
  • ورود
  • ثبت نام
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Menu
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما

آموزش رایگان CSS – جلسه 6

تیر 29, 1400
نویسنده حامد نجفی
HTML-CSS ، برنامه نویسی
287 بازدید
Background در CSS | آموزش رایگان css - جلسه 6

به جلسه ی هفتم از سری جلسات آموزش CSS افق وب خوش آمدید. در این جلسه می خواهیم شما را با ویژگی Background در CSS آشنا کنیم. برای دسترسی به جلسه پنجم کافیه از لینک قرار داده شده استفاده کنید. پیشنهاد ما این است که تمام جلسات را پشت سر هم مطالعه کنید و تمرین و تکرار را برای یادگیری بیشتر فراموش نکنید.

ویژگی Background در CSS

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

انواع پس زمینه ها

در حالت کلی 5 نوع پس زمینه وجود دارد؛

  1.  background-color
  2.  background-image
  3.  background-repeat
  4.  background-attachment
  5.  background-position

هر کدام از این پس زمینه ها ویژگی هایی را به عناصر موجود در صفحه اضافه می کنند که در ادامه به مثال هایی از آنها نگاهی میندازیم.

background-color

این خاصیت رنگ پس زمینه ی عنصر مورد نظر را تغییر میدهد. برای مثال کد زیر امکان تغییر رنگ بدنه ی سایت را فراهم می کند؛

body {background-color:#b0c4de;}

عناصر < p> ، <h1> و <div> در مثال های زیر رنگ پس زمینه دریافت می کنند؛

h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p {
background-color: yellow;
}

در CSS رنگ ها را میتوان با روش های زیر برای یک عنصر اعمال کرد؛

 

  1.  روش اول اینکه از نام رنگ استفاده کنیم مانند؛ red , blue , green و…
  2.  روش دوم استفاده از هگزادسیمال است مثلا #f00000
  3.  روش سوم قرار دادن یک مقدار RGB است.مثلا (255 0 0) rgb
  4.  روش چهارم استفاده از SHL است مانند hsl(0deg 100% 50%)

 

هر چهار روش بالا رنگ قرمز را نشان میدهد.

 

ویژگی Background در CSS
ویژگی Background در CSS

background-image

با استفاده ازاین ویژگی می توانیم یک تصویر پس زمینه دلخواه, برای عنصر مورد نظر انتخاب کنیم. مثال زیر نمونه ای از این ویژگی برای ایجاد یک تصویر است؛

body {background-image:url(‘path/flower.png‘);}

تصویر انتخابی به طور پیش فرض آنقدر تکرار می شود تا تمام پس زمینه ی عنصر مورد نظر را بپوشاند.

نکته 01؛

دقت کنید که در url باید آدرس تصویر مورد نظر قرار داده شود. اگر تصویر در مسیر دیگری غیر از مسیر فایل CSS بود باید آدرس مسیر تصیر در url قرار داده شود.

نکته02؛

برای انتخاب تصویر مورد نظر دقت لازم را داشته باشید چون تاثیر زیادی در خوانایی متن شما خواهد داشت. یک تصویر بد با رنگ های نامناسب میتواند متن شما را غیر قابل خواندن ، کند و چشم کاربر را خسته کند.

background-repeat

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

body
{
background-image:url(‘gradient2.png‘);
background-repeat:repeat-x; /*تکرار در راستای افقی*/
/* background-repeat:repeat-x; تکرار در راستای عمودی */
}

مثال زیر نمونه ای از عدم تکرار تصویر است؛

body
{
background-image:url(‘img_tree.png‘);
background-repeat:no-repeat; /*بدون تکرار*/
}

background-position

حالا تصویر کنید که تصویر شما در جای مناسبی نیست یا اینکه دقیقا زیر متن قرار دارد و شما برای خوانایی بیشتر می خواهید آن را جا به جا کنید. در این صورت از ویژگی background-position استفاده می کنیم . اما به چه صورت؟ نگاهی به مثال های زیر بیندازید و سعی کنید آن ها را به خاطر بسپارید؛

body {
background-image: url(“flower.png“);
background-repeat: no-repeat;
background-position: right top;
}

 

background-attachment

با استفاده از این ویژگی میتوان حالت تصویر پس زمینه را تعیین کرد مثلا می تواند ثابت باشد یا در حالت اسکرول باشد.ثابت این است که با اسکرول کردن صفحه پس زمینه ثابت می ماند و در حالت اسکرول همزمان با اسکرول صفحه پس زمینه نیز اسکرول می شود.
به مثال زیر نگاه کنید؛

body {
background-image: url(“flower.png“);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
/*background-attachment: scroll;*/

}

background-size

با این ویژگی می توانید اندازه ی پس زمینه را تغییر دهید به مثال زیر توجه کنید:

div
{
height:600px;
background-image: url(“flower.png“);
background-repeat: repeat;
background-attachment: fixed;
background-size: 100px;
}

ترتیب قرار گرفتن این ویژگی ها

ترتیب قرارگیری این ویژگی ها اهمیتی ندارد اما یک روش بهینه و اصولی برای نوشتن کدهای CSS این است که به جای جدا نوشتن هر یک از حالت ها آن ها را در یک خط در ویژگی background بنویسیم.

body {
background-color: #ffffff;
background-image: url(“img_tree.png“);
background-repeat: no-repeat;
background-position: right top;
}

مثلا به جای اینکه کدها را مثل کد بالا به کار ببریم بهتر است همه ی آن ها را در یک خط و به صورت زیر بنویسیم.

body{
background: #ffffff url(“img_tree.png“) no-repeat right top;
{

 

دوره ی آموزش html و css

 

😊✌از بقیه ی جلسات آموزش CSS جا نمونید.✌😊

4.3/5 - (3 امتیاز)
اشتراک گذاری:
برچسب: Background در cssCssآشنایی با cssآموزش رایگان CSS
About حامد نجفی

بعد از گذشت 9 سال کار با وردپرس و فعالیت اینترنتی هر روز علاقه ام به این کار بیشتر میشه. سختی های زیادی تو این راه کشیدم و دوست دارم به شما کمک کنم این مسیر رو سریعتر طی کنین. با من در شبکه های اجتماعی در تماس باشید :)

More Posts by حامد نجفی
تبلیغات
هاست وردپرس

مطالب زیر را حتما مطالعه کنید

آموزش رایگان CSS- جلسه 16| جدول ها در CSS

آموزش رایگان CSS- جلسه 16

آموزش رایگان CSS- جلسه 15| لیست ها در CSS

آموزش رایگان CSS- جلسه 15

اموزش رایگان CSS- جلسه 14| تصاویر در CSS

آموزش رایگان CSS- جلسه 14

آموزش رایگان CSS - جلسه 13| لینک ها در CSS

آموزش رایگان CSS – جلسه 13

آموزش رایگان CSS- جلسه 12| فونت ها در css

آموزش رایگان CSS- جلسه 12

آموزش رایگان CSS - جلسه 11| متن ها در CSS

آموزش رایگان CSS – جلسه 11

قدیمی تر آموزش رایگان CSS- جلسه 5
جدیدتر آموزش رایگان CSS - جلسه 7

2 Comments

Join the discussion and tell us your opinion.

  • سعید گفت:
    مرداد 30, 1400 در 2:51 ب.ظ

    سلام
    برای نمایش تصویر
    از background-image استفاده کنیم یا تگ image?

    پاسخ
  • مهران گفت:
    مرداد 30, 1400 در 2:55 ب.ظ

    سلام
    بهترین شیوه رنگ دادن چیه؟
    تو کدوم جلسه رنگ ها رو توضیح دادین؟

    پاسخ

دیدگاهتان را بنویسید لغو پاسخ

Search for:
نوشته‌های تازه
  • تقویم محتوا چیست؟ (جلسه 33)
  • استراتژی تولید محتوا (جلسه 32)
  • عادت‌ نویسندگان مشهور و سرشناس (جلسه 31)
  • راهنمای کامل تغذیه محتوا نویس (جلسه 30)
  • چگونه یک محتوای تصویری خوب بسازیم؟ (جلسه 29)
آخرین دیدگاه‌ها
  • سهند در آموزش تغییر رنگ پس زمینه در وردپرس
  • mojtaba در پرینت و ذخیره اطلاعات محصول با افزونه WooCommerce PDF Invoices & Packing Slips
  • مجید بهرامی راد در چگونه یک وب سایت موفق و درآمد زا داشته باشیم؟
  • پریا صادقی در چگونه یک وب سایت موفق و درآمد زا داشته باشیم؟
  • مریم در آموزش ایجاد صفحه تماس با ما در المنتور(جلسه 10)

یاد باد آنکه ز رخسار تو هر صبحدمی

افق دیده پر از شعله خور بود مرا

دسته بندی بلاگ

  • بازاریابی
  • سئو
  • محتوا نویسی
  • مقالات آموزشی
  • وردپرس
  • بازاریابی
  • سئو
  • محتوا نویسی
  • مقالات آموزشی
  • وردپرس

خدمات مشتریان

  • تدریس خصوصی وردپرس
  • روش دریافت محصولات دانلودی
  • مشاوره دوره ها
  • تدریس خصوصی وردپرس
  • روش دریافت محصولات دانلودی
  • مشاوره دوره ها

دسترسی سریع

  • تماس با ما
  • درباره ما
  • قوانین و شرایط
  • استخدام
  • تماس با ما
  • درباره ما
  • قوانین و شرایط
  • استخدام

تمامی حقوق مادی و معنوی این سایت متعلق به آکادمی افق وب میباشد.

ورود
استفاده از موبایل
استفاده از آدرس ایمیل
آیا هنوز عضو نیستید؟ اکنون عضو شوید

بازنشانی رمز عبور
استفاده از موبایل
استفاده از آدرس ایمیل
عضویت
قبلا عضو شدید؟ اکنون وارد شوید

12 + 14 =