آموزش قرار دادن تصویر پس زمینه در CSS

۱۴ دیدگاه

مقالات این سری آموزشی :

  1. آشنایی با CSS و شروع کار با آن
  2. آموزش انتخابگر ها (Selectors) در CSS
  3. روش های اضافه کردن CSS به سایت
  4. آموزش قرار دادن تصویر پس زمینه در CSS

خاصیت background در css برای اعمال پس زمینه به عناصر صفحه بکار می رود

خاصیت هایی که در CSS برای کار با پس زمینه استفاده می شوند ُ‌عبارتند از :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

 


در ادامه تک تک موارد بالا را توضیح می دهیم

Background Color

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

body {
    background-color: #b0c4de;
}

در CSS رنگ را اغلب به سه روش تعیین می کنند :

  • یک مقدار HEX مثل “#ff0000
  • یک مقدار RGB مثل “rgb(255,0,0)
  • اسم رنگ مثل “red

لیست کامل مقادیری که برای رنگ قابل اعمال است می توانید از اینجا ببینید.

در مثال زیر به همه تگ های <h1> , <p> و <div> رنگ های مختلفی اعمال می شود

h1 {
    background-color: #6495ed;
}

p {
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
}

Background Image

این خاصیت می تواند یک عکس را به عنوان پس زمینه یک عنصر قرار دهد .

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

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

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

بالا یه عکس به نام paper.gif رو داده به عنوان پشت زمینه کل صفحه.

Background Repeat

با این خاصیت می توان تعیین کرد که تصویر پس زمینه در چه جهتی تکرار شود . افقی – عمودی , فقط افقی و یا فقط عمودی و یا اصلا تکرار نشود .

در همین رابطه :   10 کاراکتر کارتونی که از صفر تا صد با HTML و CSS طراحی شده اند!

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

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

 

اگر بخواهید تصویر اصلا تکرار نشود از کد زیر بایستی استفاده کنید :

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

‌Background Position

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

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

در این مثال گفتیم که موقعیت تصویر در گوشه بالا سمت راست باشد .

‌Backgroud Attachment

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

به صورت پیش فرض تصویر ثابت نیست و حرکت می کند . برای تثبیت آن باید از کد زیر استفاده کنید :

body { 
    background-image: url('w3css.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
}

 

 

دسته بندی : CSS

14 نظر

  1. سلام.من رسپانسیو سایتی که طراحی کردم رو اوکی کردم اما نمیدونم چرا تو سیستم عامل اندروید تصویر زمینه سایتم جمع میشه.این مشکل تو ای او اس وجود نداره

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

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

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

    body {
    background-color: linear-gradient(to bottom, #33ccff 0%, #ffffff 100%);
    background: url("img_tree.png") no-repeat right top;
    margin-right: 200px;
    }

    Hello World!

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

  5. با سلام ببخشید بنده کد هاتون میزنم بگراند سفید میشه ولی وقتی ما بین”” ادرس تصویر اپلو شده رو میزارم عکس به بگراند نمیاد

پاسخی بگذارید

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

More in CSS
روش های اضافه کردن CSS به سایت

مقالات این سری آموزشی : آشنایی با CSS و شروع کار با آن آموزش انتخابگر ها (Selectors) در CSS روش...

Close